[thelist] CSS: margin and padding?

Steve Cook steve.cook at evitbe.com
Mon May 13 09:33:00 CDT 2002

If we look at a div element as being a box drawn around your content, then
one can start to break down the various elements.

Starting from the inside of your box, you can specify width and height.

If  we set a width and height of 100px each then you have a content area of
100x100px in your div.

	<div style="width: 100px; height: 100px; border: 1px solid

The next customisable part of your div is the padding. This lies between
your content area and any border that you may have set. You can see it in
your div by setting a background color and a border color:

	<div style="width: 100px; height: 100px; border: 1px solid black;
background: f00; padding: 20px;">Content</div>

Important to notice is that the background colour has filled in the padding
area as well. However you should be able to see that your content is now
offset from the border by 20px.

The next part of the box is the margin, which lies outside the border you
have set, as one can see in this example:

	<div style="width: 100px; height: 100px; border: 1px solid black;
background: f00; padding: 20px; margin: 20px;">Content</div>

You should be able to see now that your div is offset by 20px in each
direction from any surrounding content on the page.

This layout of width, height, padding, border, margin is referred to as the
CSS box model and you can find more information about using it in different
ways here:

Worth noticing is that this doesn't just apply to divs, every element in a
document is treated as a box by CSS.

I hope that's a good starting point.


 Cookstour - http://cookstour.org

> -----Original Message-----
> From: Michael Galvin [mailto:mgalvin at sourcevisualthinking.ie]
> Sent: den 13 maj 2002 16:11
> To: theList
> Subject: [thelist] CSS: margin and padding?
> What is the difference between margin and padding in a div
> definition?  Is
> it the same sort of deal as the cellpadding and cellspacing
> in a table?
> Does margin (or padding) only become visible if you have a
> border around the
> div?
> --
> Michael Galvin
> source visual thinking

More information about the thelist mailing list