<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Examples of margins, padding, and borders</TITLE>
<STYLE type="text/css">
ul {
</HEAD>
<BODY>
<UL>
<LI><b>Example of margins, padding, and borders</b>
<LI class="withborder"><b>Note that:</b><br>
<br> * The content width for each LI box is calculated top-down; the containing block for each LI box is established by the UL element.
<br>* The margin box height of each LI box depends on its content height, plus top and bottom padding, borders, and margins. Note that vertical margins between the LI boxes collapse.
<br>* The right padding of the LI boxes has been set to zero width (the 'padding' property). The effect is apparent in the second illustration.
<br>* The margins of the LI boxes are transparent — margins are always transparent — so the background color (yellow) of the UL padding and content areas shines through them.
<br>* The second LI element specifies a dashed border (the 'border-style' property).
</UL>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Examples of margins, padding, and borders</TITLE>
<STYLE type="text/css">
ul {
background:#404242;
margin: 12px 12px 12px 12px;
padding: 3px 3px 3px 3px;
}
li{
color: white;
background: #808686;
margin: 12px 12px 12px 12px;
padding: 12px 0px 12px 12px;
list-style: none
}
li.withborder {
border-style:double;
border-width: medium;
border-color:lime;
}
</STYLE></HEAD>
<BODY>
<UL>
<LI><b>Example of margins, padding, and borders</b>
<LI class="withborder"><b>Note that:</b><br>
<br> * The content width for each LI box is calculated top-down; the containing block for each LI box is established by the UL element.
<br>* The margin box height of each LI box depends on its content height, plus top and bottom padding, borders, and margins. Note that vertical margins between the LI boxes collapse.
<br>* The right padding of the LI boxes has been set to zero width (the 'padding' property). The effect is apparent in the second illustration.
<br>* The margins of the LI boxes are transparent — margins are always transparent — so the background color (yellow) of the UL padding and content areas shines through them.
<br>* The second LI element specifies a dashed border (the 'border-style' property).
</UL>
</BODY>
</HTML>
Output:-
No comments:
Post a Comment