[css-d] Margin vs. Padding
I think this is a simple question. And perhaps there is no straight answer. If I don't have a border, what is the difference between using padding or margin to add space around an element? Is there any reason to choose one over the other? Thanks, Scott Need a vacation? Get great deals to amazing places on Yahoo! Travel. http://travel.yahoo.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Margin vs. Padding
Scott Povlot wrote: I think this is a simple question. And perhaps there is no straight answer. If I don't have a border, what is the difference between using padding or margin to add space around an element? Is there any reason to choose one over the other? Hi Scott, I guess it depends on what will be adjacent to the element and how the current element needs to interact with it. In some cases, the visual aspect of margin or padding are identical, but the underlying structure is not. A paragraph within a div which has padding: 20px; declared, will be 20px from the div edge. margin: 20px; will make sure the /div/ is never closer than 20px from an adjacent element. At the risk of stating what's clear, margin pushes the element from it's adjacent cousins while padding refers to the usable space within the element. More info on the box model is avail at w3.org [1] and many other places. I hope this helps. Kind regards, ~Ray [1] http://www.w3.org/TR/REC-CSS2/box.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Margin vs. Padding
On 27 Sep 2007, at 14:04, Scott Povlot wrote: If I don't have a border, what is the difference between using padding or margin to add space around an element? Is there any reason to choose one over the other? Vertical margins collapse; padding doesn't: http://www.w3.org/TR/CSS21/box.html#collapsing-margins Regards, Nick. -- Nick Fitzsimons http://www.nickfitz.co.uk/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Margin vs. Padding
Nick Fitzsimons wrote: On 27 Sep 2007, at 14:04, Scott Povlot wrote: If I don't have a border, what is the difference between using padding or margin to add space around an element? Is there any reason to choose one over the other? Vertical margins collapse; padding doesn't: http://www.w3.org/TR/CSS21/box.html#collapsing-margins Regards, Nick. However, vertical margins do not collapse in IE6 (are you surprised) so the big difference when using padding and margin is that margins will collapse most of the time. Also if you are applying any sort of background, the background will spill into the padding but not the margin of an element. -Mark __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Margin vs. Padding
On 27 Sep 2007, at 14:40, Mark Story wrote: Nick Fitzsimons wrote: On 27 Sep 2007, at 14:04, Scott Povlot wrote: If I don't have a border, what is the difference between using padding or margin to add space around an element? Is there any reason to choose one over the other? Vertical margins collapse; padding doesn't: http://www.w3.org/TR/CSS21/box.html#collapsing-margins However, vertical margins do not collapse in IE6 (are you surprised) so the big difference when using padding and margin is that margins will collapse most of the time. Also if you are applying any sort of background, the background will spill into the padding but not the margin of an element. -Mark Actually, IE6 _does_ support collapsing margins, but gets it wrong (are you surprised :-) in a number of cases, such as when an element hasLayout and also has child nodes with margins which should collapse with the margins of preceding or following boxes (they don't). Another difference between margin and padding: margins can have negative size; padding can't. Cheers, Nick. -- Nick Fitzsimons http://www.nickfitz.co.uk/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
