Can someone explain the difference between Margin & Padding

Which is better / more consistently implemented

[IanTurner]

I am having trouble understanding the difference between margin and padding.

Is one more consistent than the other, is one preferred to the other by standards?

[SuzyUK]

margin
...........rendered outside the element...........

padding
.......inside the element........

element content area
.
.
.
.

Summarised Box Model...
1.the border around the outside of the padding area would be where the border property would come into it.

2.And the borders around the margin area and the content area shouldn't really exist, only here for display purposes!

---

There is no right/wrong, both are consistently implemented and standards don't come into it. Margin and Padding serve different purposes. although they are both "invisible"

Padding:
If your element has a background color that background color would fill the content area and the padding area. i.e. it would be inside the "element"

Margin:
If you want to space an element from it's preceding element then margin would be the correct thing to use as it does just that ~ creates a margin between one element and the next. Although if you have no background color or borders obviously padding would do, but would not be strictly correct

It's probably easier to understand if you have borders, then it also becomes obvious which one to use. Do you want the "space" after the border (outside the element = Margin) or before the border (inside the element = Padding).

Suzy

[victor]

margin

border

padding

content

padding

border

margin

Margin is on the very outside -- on the edge if you like.

Padding separates the content from the border -- like the packing material in a box.

I think the only real difference is that a background extends to the border -- so it spills over into the padding. But its stops at the border, so the margin is not the same color/image as the content and padding.

[IanTurner]

Okay so if I position an element at top:100px; left:100px; should the top left corner of the margin be at 100,100 or the top left corner of the padding at 100,100?

[SuzyUK]

well having done a test to check... it's the Margin... which makes sense as the whole box [in the box model] is what is being positioned. You wouldn't be picking up part of an element....

However there should be no need for margins on elements if you're absolutely positioning them. By A.positioning them you are taking them out of the flow so you cannot create a "gap" between them and other elements by controlling its margins therefore no need for margins, just adjust/control the positioning required.

When using relative positioning the same sort of thing applies. I always remove margins from elements that are involved in absolute or relative positioning (especially elements that have default margins ;)) Then you know exactly what you're dealing with...

Suzy

[IanTurner]

#leftcontent {
background-color:#ffffff;
position: absolute;
left:100px;
top:100px;
width:200px;
padding-left:8px;
margin-left:8px;
border-right: thin solid #CCCCF0;
}

Given the above div - I expected the overall size to be 200px. Yet it appears to be 208px; Is this what I should expect i.e. the margin is in addition to the width of the element.

[drbrain]

Margins also collapse, so if you have a margin-bottom: 20px; and a margin-top: 10px on a consecutive element, the distance between their border-boxes will be 20px.

[SuzyUK]

No it's actually (or should be) 216px + whatever that thin border renders as :)

Oh and I thought that this was an easy question ;)

OK first probably best not to use keywords in border shorthand you can't be guaranteed of their width cross browser. If You use 1px instead at least then if you need pixel perfection you can count the width.

The Box Model Explained further: Victors drawing is better ..

The Box consists of Margin, Border, Padding, Content. each of these count towards the width of the box. If you have specified the width (200px) in your case that is the width of the content area only...

but!... this is where IE5.x and IE6 quirks "differ".. they will render the box as 200px including padding and border.... this is the biggest CSS headache around, hence the amount of hacks on the go to feed differing widths to IE, And why I keep saying understanding the box model is probably the single most important aspect when getting into CSS ;)

so your box is
width:200px;
padding-left:8px;
margin-left:8px;
border-right: thin solid #CCCCF0;

(in all but aforementioned IE browsers):
200px + 8px + 8px + unknown (but probably 1px) = 217px

Unless it's the aforementioned IE, where it is 208px
200px + 8px margin only

now... do you want to nest a div in a div, use an IE Conditional Comment or use a BMH (Box Model Hack) ;)

Suzy

[Reflection]

I like to avoid the problem by not setting padding on fixed width containers. Instead I set margins on the elements inside the container.

Avoiding IE6 quirks mode is also helpfull.

[IanTurner]

Arghhhhhh - my head feels like jelly.

This is all very counterintuitive to someone brought up on tables and trying to convert.

So (ignoring the IE problems - which need to be hacked about) the width setting only applies to the content. margin, padding and border are all in addition.

I need to remember that the margins of consecutive elements overlap, but that I can place a fixed position element over the margin of another element.

I also need to remember that a background extends to a border, but excludes the margin.

Many thanks to everyone for helping with this one.

[stever]

If it helps to do it visually, think of an A4 page of type inside a picture frame.

The margin is the space between the edge of the sheet of paper and the other elements (the parts of the frame).

The padding is the space between the edge of the sheet and where the type starts on the page.

The border would be the edge of the sheet of paper.