Margins and Padding

margin-top:      size|percentage;
margin-bottom:   size|percentage;
margin-left:     size|percentage;
margin-right:    size|percentage;
margin:          size|percentage;   [1-4 values]

border-top:      size|percentage;
border-bottom:   size|percentage;
border-left:     size|percentage;
border-right:    size|percentage;
border:          size|percentage;   [1-4 values]

In the margin and border properties, you can specify up to four values. These are handled as follows:

• When you specify just one, it applies to all four sides.

• When you specify two, the first value applies to the top and bottom, and the second applies to the left and right.

• When you specify three, the first value applies to the top, the second to both the left and right, and the third to the bottom.

• When you specify all four, they apply in this order: top, right, bottom left.

Recall the CSS box model:

        _______________________________________
       |                                       |
       |           margin (transparent)        |
       |   _________________________________   |
       |  |                                 |  |
       |  |        border                   |  |
       |  |   ___________________________   |  |
       |  |  |                           |  |  |
       |  |  |     padding               |  |  |
       |  |  |   _____________________   |  |  |
       |  |  |  |                     |  |  |  |
       |  |  |  |  content            |  |  |  |
       |  |  |  |_____________________|  |  |  |
       |  |  |___________________________|  |  |
       |  |_________________________________|  |
       |_______________________________________|

                |    element width    |
       |               box width               |

The margin is the amount of empty space outside the border, while the padding is the empty space inside the border. If you aren't putting a border around an element, you can choose to use either margin or padding to achieve extra empty space around an element. If you find that margin doesn't give the proper look in some browsers, try using padding (or vice versa) — you might be running into a browser support problem.

There's one significant difference between margin and padding: margin lets you specify a negative number to reduce the normal margin. Padding does not allow negative values.

And there's another difference for vertical spacing. If two vertically adjacent elements both specify margins, the margin is collapsed: the elements are spaced only by the amount of the larger margin. For example, if you specify h1: margin: 10px; and h2: margin: 5px; and if you code an <h2> tag immediately after an <h1> tag, there will only be 10px of margin between the two, not 15px. This collapsing does not occur for padding, and it does not occur for horizontal spacing.

Example

Here we specify a margin for our paragraphs (but not for other elements), and we create an .indent class that lets us indent elements.

Try changing the margin so that it applies to body instead of to p