Margins and Padding

Property Value Description N.N. I.E.
margin-top:
margin-right:
margin-bottom:
margin-left:
auto
length
percentage
Sets the margin for the specified side 4.0 4.0
margin: auto
length
percentage
Shortcut to set the margin for all 4 sides 4.0 4.0
padding-top:
padding-right:
padding-bottom:
padding-left:
length
percentage
Sets the padding for the specified side 4.0 4.0
padding: length
percentage
Shortcut to set the padding for all 4 sides 4.0 4.0
  • N.N = Netscape Navigator ®
  • I.E. = Internet Explorer ®
  • Click the "property" to jump to that section.
If you read the section on borders then margins and padding is going to be a breeze. The margin is the spacing between the outside of a page element and the other elements around it. Such as this inner box and the outer box it's nested inside of or the space between the outer box and the table above it. The padding is the space between an element and its content. Like this text and the box its inside of. Still don't quite understand? Then read the first paragraph of the section on borders for more examples.
.box{
 margin-top:20px;
 margin-right:5mm;
 margin-bottom:2em;
 margin-left:2cm;
 padding-top:5%;
 padding-right:1.5cm;
 padding-bottom:10pt;
 padding-left:2mm;
}
The code above has been applied to this inner box. The outer box is just here for perspective. You can see some of the different values you may use and the effect they have. These values are the standard units of measure you've already learned about so I won't go into them again. If you would like to review them then click here to open a new page and view the description from the fonts section. You don't have to set a value for all four sides. Just for which ever one's you would like to. For the margin you can also use "auto" and let the browser set it for you or use negative numbers to get elements to overlap. These last two are not posible with padding.
Support us by supporting our advertisers!



© 2004 Terry Lamrouex