The following HTML tags can be treated as block-level elements:
There are the following elements to control:
The block-level elements are handled differently by earlier versions of Netscape (4.7) and Internet Explorer (prior to 5.0). The following set of nested boxes will be correctly displayed by Mozilla, Explorer 6.0, and Netscape 6.0 or above.
The margin is the space between the block-level element and the parent element. there are four attributes that control the margin size:
| Attributes | Description |
|---|---|
| margin-top: value | the space between the top of the box and the top margin |
| margin-right: value | the space between the right side of the box and the right margin |
| margin-bottom: value | the space between the bottom of the box and the bottom margin |
| margin-left: value | the space between the left side of the box and the left margin |
where the value is measured in absolute units (inches, em) or percentages of the parent element.
Example:
| li {margin-left: 2em; margin-right: 2em; margin-top: 1em} |
The four attributes can be combined in a single attribute with the syntax:
Padding refers to the amount of space between the element and its border. Four attributes are used to control the size of the element's padding:
One difference to keep in mind is that when padding is expressed as a percentage, it is the percentage of the width of the block-level element rather than the parent element, as is the case for margins.
The syntax for the border attribute is:
There is also a possibility to format individual borders by using the attributes border-top, border-right, border-bottom, and border-left, respectively. For each individual border a set up to 3 style elements should be supplied.
Warning: Earlier versions of Internet Explorer and Netscape display the boxes differently. Always make sure to provide the box width.
The situation seems to be somehow better with non-nested blocks. The following blocks are displayed approximately the same by Internet Explorer and Netscape Navigator. However, Opera browser (version 5.12) does not show the green background.
Examples of various settings of border-style are shown below:
double line |
dashed line |
dotted line |
solid line |
inset line |
outset line |
ridged line |
grooved line |
none |
Putting all together, the top set of nested boxes is produced by the following code:
<div style="padding : 15px 40px 40px 40px;
background-color : white">
<h4 style="text-align:center">box margin</h4>
<div style="border : 7px solid red;
padding : 15px 40px 40px 40px;
background-color : lightgreen">
<h4 style="text-align:center">box padding</h4>
<div style="background-color : yellow">
This is the box body. The body can contain various HTML tags, for example:
<ul>
<li> paragraphs
<li> lists
<li> tables
</ul>
</div> </div> </div>
|