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 |
|
||||
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;
}
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.