XML/CSS Style/margin

margin left

   <source lang="xml">

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;

}

</source>
   
  

Set margin

   <source lang="xml">

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)

}

</source>
   
  

Set margin top and margin bottom

   <source lang="xml">

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

}

</source>
   
  

Set margin value

   <source lang="xml">

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;

}

</source>
   
  

Setting the Margins around an Element

   <source lang="xml">

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

}

</source>