How vertical padding and margins are applied vary between browsers. The typical reaction I see is that vertical padding/margins/borders are applied, but they do not change the dimensions of the inline element. Meaning if an inline element is 1em tall, it remains 1em tall and it is rendered as if it's 1em tall regardless of how much vertical spacing you add.
It's like the vertical padding is absolutely positioned, that is removed from the flow of the document. Here's a quick example: http://webhost.bridgew.edu/etribou/temp/inlines.html Span 1 has 10px padding and margin. Span 2 has 1000px vertical padding. Some browsers will generate a vertical scrollbar to fit the padding, other's clip at either the viewport or the document boundaries. Span 3 has 2000px vertical margins. You'll see that doesn't trigger scroll bar in those that do with padding because you'd see a longer document with empty space below the green of span 2. And if you test this across multiple browsers you'll see the reactions vary. Margins, it appears, are collapsing or being ignored entirely. Since horizontal margins are being applied I belive the vertical margins are applied as well except they're collapsed. CSS 2.1 spec doesn't state how vertical padding/borders/margins should be rendered, in fact it seems to explicitly say the spec doesn't cover it. Horizontal values, it does say, should be respected. See: http://www.w3.org/TR/CSS21/visuren.html#inline-formatting http://www.w3.org/TR/CSS21/visudet.html#inline-non-replaced Hope that explains what you're experiencing. -- Eric Tribou Web Developer Bridgewater State College http://www.bridgew.edu > -----Original Message----- > From: [EMAIL PROTECTED] > [mailto:[EMAIL PROTECTED] On Behalf Of Tee G. Peng > Sent: Wednesday, October 18, 2006 10:06 AM > To: [email protected] > Subject: Re: [css-d] why margin-top/bottom don't work for span class? > > Hi Alex, thanks for the quick response. > On Oct 18, 2006, at 6:42 AM, Alex Bienz wrote: > > > span is an inline element, and top and bottom paddings and margins > > don't apply to inline elements. > > But according to my example, it does work for top/bottom > padding. In the example I have background color declared, > when I increase pixels for top/bottom padding, the 'box' > expands vertically. > > > tee > ______________________________________________________________________ > css-discuss [EMAIL PROTECTED] > http://www.css-discuss.org/mailman/listinfo/css-d > IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 > List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by > evolt.org -- http://www.evolt.org/help_support_evolt/ > ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
