The border and padding properties. To change the distance between a text or the box edge generated by an image and the containing block's box edge, use the
padding property. As for the border width (border), it must be assigned a value.
Webmaster
Style sheets : Creating a Reusable Template
[ Contents ]
Dr Benton
Defining the Formatting Template
Now that our text levels have been assigned the appropriate styles, we need to define the layout and formatting of our page.
In our example, the page is divided vertically into two areas. The left one, called CadrePrincipal, will contain the main text (the ideas you want to publish), and the right one, named CadreDroit, will show the internal or external links and the notes, etc.
<div id="CadreDroit" style="position:absolute; left:500px; top:110px; width:230px; height:480px; background-color: #B1E33C; layer-background-color: #B1E33C; border: 1px none #000000; padding: 12px; line-height: 22pt; font-size: 8pt; font-family: Arial">
</div>
<div id="CadrePrincipal" style="position:absolute; left:8px; top:110px; width:490px; height:480px; background-color: #E2F4B7; layer-background-color: #E2F4B7; border: 1px none #000000; padding: 12px" CLASS="Texte">
</div>
The border and padding properties. To change the distance between a text or the box edge generated by an image and the containing block's box edge, use the
padding property. As for the border width (border), it must be assigned a value.
These two areas are empty for now. If you look closely at the end of the first area's definition, you will notice a character size setting of 8 points and see that Arial has been selected as the font family. The reason for this is that, even though this section will contain links, we also want to display text in it. The properties set here will not apply to the links that have static properties (defined by the corresponding style).