You’re viewing an archive of outdated material. Visit The Web Standards Project’s updated site to learn about our current mission.
This is a normal testing paragraph, for reference.
This is a normal testing paragraph, for reference.
This is an inline box with a 3em margin.
The margin should not have any effects on the top and bottom, since line
spacing is determined by font-size, line-height,
and vertical-align. On the sides, it should cause a gray
space before and after the inline box, which ends after this sentence.
Instead of doing this, MacIE applies the margins for the inline box to
the block level element in which the inline box is contained. The top
margins are only applied when the inline box begins the block box and
the side margins are only applied when the inline box begins every line
of the block box. The bottom margins seem to be applied only when the
inline element ends the block box.
When the inline box does not begin the block box, different things happen. While the behavior should be the same, a simple gray space before and after the box, MacIE indents the inline box at the beginning and end of every line on which it is continued (but not the one where it starts). It doesn't put the gray space at the beginning and end, like it should.
This is a normal testing paragraph, for reference. It is double spaced so that the padding looks reasonable when rendered correctly.
This paragraph is entirely an inline element with padding. The padding is 3em on the sides and 0.4em on the top and bottom. The side padding should create a green space at the beginning and end of the text. The top and bottom padding should make the background of the inline element almost fill the gaps between the lines. Instead, MacIE ignores the top and bottom padding and uses the side padding to increase the margins of the contaning block-level element.
MacIE treats padding in the middle of the paragraph just like it treats margins. What should happen is just like what should happen in the previous case: the side padding creates additional space with the background color of the inline element, and the top and bottom padding make the background of the inline element expand into the spacing between the lines. However, this is not what happens. Instead, the only thing MacIE does is indent both the beginning and end of any line that is begun by the inline element with padding. This is not the correct behavior, and causes very strange display for a reasonable style suggestion.
When the padding is large enough to extend outside of the half-leading of the inline element (the leading is the difference between line-height and font-size - half of it is placed on each side of the font), it should not make the lines separate more. Allowing it to do so removes some of the power of CSS and misleads authors into thinking that lines increase to allow for large padding. MacIE not only increases the line spacing, but it does not actually draw the padding that this increase made room for. The height of the lines should not be affected by the yellow padding in any way.