Margins?

[Joseph Witchard]

Could someone explain to me what CSS margins do? I've never really understood what they do and how they work.

[Centauri]

Pretty much as their name would suggest - they provide spacing between adjoining elements. margin-top: 10px would space the element 10px away from the one above it, etc. margin : 0 auto (top and bottom zero, side margins "auto") will centre a block element within its container.

[Joseph Witchard]

If you can just do margins, why even bother with padding styles in CSS?

[ray326]

1. Because padding is different from margins
2. Because padding doesn't collapse

[Joseph Witchard]

I know that padding is different than margins. From what I understand (and I may be way off;) ), margins space your element away on the outer part of the element, while padding spaces in the inner part. Couldn't you accomplish that same effect with margins?

Also, what do you mean by collapsing?

[ray326]

Couldn't you accomplish that same effect with margins?Maybe but it depends on the effect.
Also, what do you mean by collapsing?
http://www.google.com/search?q=margin+collapse

[Joseph Witchard]

Ah, thanks for the link. So, as far as margins go, do you just make sure that element margins don't "touch" each other in order to keep them from collapsing?

[Centauri]

And how would you make sure they don't "touch"?

Margin collapse is quite useful, as it allows you to specify margins all the way around elements and two such elements will be spaced apart only by the largest margin instead of them adding - the standard for text paragraphs. If you are starting off with no margins, and you want to space two block elements apart, you would normally only add one margin on one element (I usually prefer the bottom).

If you have a border on an element, then margins and padding are not interchangeable as the border is between them. You also can't set padding to "auto".