Home >> Tutorials/FAQs >> CSS Tutorials >> Index
CSS Tutorials - Testing Margin Spaces on All 4 Sides
By: FYICenter.com
(Continued from previous topic...)
How To Test Margin Spaces on All 4 Sides?
If you want test margin spaces on all 4 sides of a <P> tag
you can use the following HTML and CSS document. It allows you
to specify margin spaces with different values and validate them
with legend boxes.
<html><head>
<style type="text/css">
H1 {font-size: 20px}
DIV.page {width: 475px; border: 1px solid black}
TABLE#out {background-color: #ffdddd}
TD#box {border: 1px solid black}
P#box {width: 300px; height: 300px;
padding: 30px 10px 40px 20px;
border-style: solid dotted double dashed;
border-width: 30px 10px 40px 20px;
border-color: #ff0000 #00ff00 #0000ff #000000;
margin: 30px 10px 40px 20px;
background-color: #ddddff}
TD.legend#w30 {height: 30px; background-color: #ffffff}
TD.legend#g30 {height: 30px; background-color: #dddddd}
TD.legend#data {height: 160px; background-color: #ffffff}
TD.legend#w40 {height: 40px; background-color: #ffffff}
TD.legend#g40 {height: 40px; background-color: #dddddd}
</style>
</head><body><div class="page">
<H1>Content Box with Paddings, Borders and Margins</H1>
<table id=out><tr>
<td id=box><p id=box><script language="JavaScript">
for (i=0; i<10; i++) {
for (j=0; j<10; j++) {
document.write(j+' ');
}
}
</script></p></td>
<td valign=top><table cellpadding=0 cellspacing=0>
<tr><td class=legend id=g30>- margin-top</td></tr>
<tr><td class=legend id=w30>- padding-top</td></tr>
<tr><td class=legend id=g30>- border-top</td></tr>
<tr><td class=legend id=data>- Content box</td></tr>
<tr><td class=legend id=g40>- padding-bottom</td></tr>
<tr><td class=legend id=w40>- border-bottom</td></tr>
<tr><td class=legend id=g40>- margin-bottom</td></tr>
</table></td>
</tr></table>
<p align="right">By FYICenter.com</p>
<div></body></html>
Save this document as marginBox.html, and view it with a browser,
you will see that the element full size is increased because of margin spaces:
(Continued on next topic...)
- What Is the HTML Element Formatting Model?
- What Are the Formatting Behaviors of HTML Elements?
- What Is a Block Element?
- What Is an Inline Element?
- What Is a Floating Element?
- Hot To Specify the Content Box Size of a Block Element?
- Hot To Specify Padding Spaces of a Block Element?
- Hot To Test Padding Spaces on All 4 Sides?
- How To Specify Borders of a Block Element?
- Hot To Test Borders with Different Widths, Styles, and Colors?
- How To Specify Margin Spaces of a Block Element?
- How To Test Margin Spaces on All 4 Sides?
- How To Specify the Color of the Margin Area?
- How To Specify the Color of the Padding Area?
- What Are the Background Properties of a Block Element?
- How To Set Background to Transparent or Non-transparent?
- How To Add Images to Backgrounds?
- What Is the Text Paragraph Formatting Model?
- How In-Line Elements Are Mixed in Text Lines?
- How In-line Elements Affect Line Box Heights?
- Is FORM a Block Element?
|