Understanding Padding, Margin, And Borders

It can be hard, at first, to remember what padding, margin, and borders do to a DIV.

Padding

Padding is considered part of a DIV's content area. The padding region can't have any actual content in it, but any background color or image that you have given the DIV will appear in the padding area.

In addition, the padding actually adds to the effective width of a DIV. This means that a 500px wide DIV with 10px padding on all sides will actually be 520px wide (10px on the left, 500 in the middle, and 10 on the right).

This is a DIV with no padding. It has width of 500px.

This is a DIV with 10px padding on all sides. The width is defined as 500px but it ends up being 520px wide.

Margin

Margins are NOT considered to be part of the content region of a div. Margin just defines extra space outside of the div that pushes other elements out of the way.

This is a DIV with no margins.
This is a DIV with 10px margin on every side.

Borders

When padding is used, the border appears on the outside of the padded region.

This is a DIV with no padding.
This is a DIV with a 1px border on each side, and 10px padding on all sides.

When margins are used, the border appears inside of the margin area.

This is a DIV with no margins.
This is a DIV with 10px margin on every side.