XML/CSS Style/margin

margin left

File: Data.xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="Style.css"?>
<personnel>
  <allPeople>
    <person>
      <name>name 1</name>
      <personnelID>123</personnelID>
      <extension>999</extension>
    </person>
    <person>
      <name>name 2</name>
      <personnelID>124</personnelID>
      <extension>997</extension>
    </person>
  </allPeople>
</personnel>
File: Style.css
personnel {
  color:#000000;
  display:block;
  background-color:#FFFFFF;
  border:solid 2px #000000;
  padding:10px;
  margin:10px;
}
allPeople {
  display:block;
  background-color:#FFFFFF;
  border:solid 2px #000000;
  padding:10px;
}
person {
  display:block;
  width:80%;
  height:40px;
  background-color:#CCCCCC;
  border:solid 2px #000000;
  padding:10px;
  margin:10px;
}
name {
  float:left;
  width:25%;
  background-color:#FFFFFF;
  border:solid 2px #000000;
  padding:10px;
}
personnelID, extension {
  float:left;
  width:25%;
  background-color:#FFFFFF;
  border:solid 2px #000000;
  padding:10px;
  margin-left:10px;
}

Set margin

File: Data.xml
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="Style.css"?>
<POEM>
  <TITLE>
    title 1
    <SUBTITLE>subtitle</SUBTITLE>
  </TITLE>
  <AUTHOR>by author</AUTHOR>
  <SECTION>
    <NUMBER>1.</NUMBER>
    <PARAGRAPH>
      <LINE>line 1</LINE>
      <LINE>line 2</LINE>
      <LINE>line 3</LINE>
    </PARAGRAPH>
    <PARAGRAPH>
      <LINE>line 4</LINE>
      <LINE>line 5</LINE>
      <LINE>line 6</LINE>
    </PARAGRAPH>
  </SECTION>
</POEM>
File: Style.css
POEM {
   font-size:140%
}
POEM, TITLE, SUBTITLE, AUTHOR, SECTION, NUMBER, PARAGRAPH, LINE{
   display:block
}
SECTION, PARAGRAPH {
   margin-top:1em
}
PARAGRAPH {
   background-image:url(Leaf.bmp)
}

Set margin top and margin bottom

File: Data.xml
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="Style.css"?>
<POEM>
  <TITLE>title</TITLE>
  <AUTHOR>author 1</AUTHOR>
  <DATE>2008</DATE>
  <NOTE>This is a floating margin note.</NOTE>
  <PARAGRAPH>
    <LINE>line 1</LINE>
    <LINE>line 2</LINE>
    <LINE>line 3</LINE>
    <LINE>line 4</LINE>
    <LINE>line 5</LINE>
    <LINE>line 6</LINE>
  </PARAGRAPH>
  <PARAGRAPH>
    <LINE>line 7</LINE>
    <LINE>line 8</LINE>
    <LINE>line 9</LINE>
    <LINE>line 10</LINE>
    <LINE>line 11</LINE>
    <LINE>line 12</LINE>
  </PARAGRAPH>
</POEM>
File: Style.css
POEM {
   font-size:12pt
}
POEM, TITLE, AUTHOR, DATE, NOTE, PARAGRAPH, LINE {
   display:block
}
DATE {
   margin-bottom:.25in
}
PARAGRAPH {
   margin-left:1in;
   margin-bottom:.25in
}
NOTE {
   border-style:solid;
   border-width:1px;
   text-align:center;    
   width:1in;
   height:1in;
   float:left
}

Set margin value

File: Data.xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="Style.css"?>
<page>
  <pageNumber>Page 1</pageNumber>
  <paragraph>
    A
    <reference>B</reference> 
    C
    <important>D</important>.
  </paragraph>
  <paragraph>
    E
    <reference>F</reference> 
    G
    <important>H</important>.
  </paragraph>
</page>

File: Style.css
paragraph {
  display:block;
  border:solid 1px #A3A3A3;
  padding: 10px;
  margin: 20px;
}
  
reference {
  display:inline;
  font-style:italic;
  color:#CC3333;
  background-color: #E6E6E6;
}
important {
  display:inline;
  font-weight:bold;
  color:#990000;
  border:solid 1px #990000;
}
page {
  display:block;
  border:solid 2px #000000;
  padding: 10px;
  margin:10px;
}
pageNumber { 
  display:block;
  padding:5px;
  border:solid 2px #336699;
  width: 60px;
  margin-bottom: 20px;
}

Setting the Margins around an Element

File: Data.xml
<?xml version="1.0" ?>
<?xml-stylesheet type="text/css" href="Style.css" ?>
<employees>
  <name language="English">T1</name>
  <name language="Latin">T2</name>
  <projects>
    <project>project1</project>
    <project>project2</project>
    <project>project3</project>
  </projects>
  <weight>3 points</weight>
  <length>3 years</length>
</employees>
File: Style.css
 
employees {
   display:block
}
name {
   display:block;
   position:absolute;
   left:9px
}
project{
   display:block;
   border:medium dotted red;
   padding:5px;margin-top:5px
}
weight{
   display:block;
   position:relative;
   left:125px;
   width:340px;
   border:thin solid red;
   padding:5px;
   margin-top:5px
}