CSS Positioning: Margin, Border, and Padding

15 May 2006

**UPDATE: **After reading this post, read the important addendum I added with the post titled DOCType? Why do I need that?

I’ve always had an issue with trying to remember in which order the margin, border, and padding items filled in an element in HTML and I came across some things that helped clairify it for me today, so I thought I’d share.

There you have it, on a div, button, etc, the white content is the contents of the tag, the blue is padding, then comes the border and finally the margin.

Default Display

This is what a DIV tag would look like with nothing (other than a border) set would look like:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean consequat erat vitae nunc. Maecenas consequat magna sed turpis. Sed vitae justo. Sed facilisis. Vestibulum porttitor. Nunc sapien augue, placerat ut, pharetra at, laoreet nec, nisl. Integer posuere, ipsum quis sagittis ultricies, erat nibh gravida nisl, sit amet tincidunt leo mi vitae neque. Cras faucibus dui nec urna. Sed mattis pretium sapien. Vestibulum iaculis dapibus sapien. Nam ipsum. Vivamus vel ligula rutrum risus euismod auctor. Suspendisse potenti. Mauris sit amet enim. Proin lacus. Cras libero lacus, rhoncus vel, scelerisque ut, tempor vitae, purus. Cras facilisis magna. Suspendisse sit amet purus id lacus commodo egestas. Quisque justo.

<div style=”width:500px; border: solid 1px black;”>…</div>

Padding

The following example has a 1px border so you can see where things fit, but also has a 25px padding around the inside:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean consequat erat vitae nunc. Maecenas consequat magna sed turpis. Sed vitae justo. Sed facilisis. Vestibulum porttitor. Nunc sapien augue, placerat ut, pharetra at, laoreet nec, nisl. Integer posuere, ipsum quis sagittis ultricies, erat nibh gravida nisl, sit amet tincidunt leo mi vitae neque. Cras faucibus dui nec urna. Sed mattis pretium sapien. Vestibulum iaculis dapibus sapien. Nam ipsum. Vivamus vel ligula rutrum risus euismod auctor. Suspendisse potenti. Mauris sit amet enim. Proin lacus. Cras libero lacus, rhoncus vel, scelerisque ut, tempor vitae, purus. Cras facilisis magna. Suspendisse sit amet purus id lacus commodo egestas. Quisque justo.

<div style=”width:500px; padding:25px; border: solid 1px black;”>…</div>

Margin

This example shows using both margin and padding.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean consequat erat vitae nunc. Maecenas consequat magna sed turpis. Sed vitae justo. Sed facilisis. Vestibulum porttitor. Nunc sapien augue, placerat ut, pharetra at, laoreet nec, nisl. Integer posuere, ipsum quis sagittis ultricies, erat nibh gravida nisl, sit amet tincidunt leo mi vitae neque. Cras faucibus dui nec urna. Sed mattis pretium sapien. Vestibulum iaculis dapibus sapien. Nam ipsum. Vivamus vel ligula rutrum risus euismod auctor. Suspendisse potenti. Mauris sit amet enim. Proin lacus. Cras libero lacus, rhoncus vel, scelerisque ut, tempor vitae, purus. Cras facilisis magna. Suspendisse sit amet purus id lacus commodo egestas. Quisque justo.

<div style=”width:500px; padding:25px; margin: 25px; border: solid 1px black;”>…</div>

There you go