Re: margin support in IE vs NS vs spec

Sho Kuwamoto wrote:
> My reading of the spec suggests that the proper rendering
> for margins on inline elements is thus:
> 
>                      1cm of space
>                          |
>                          V
>   Before before before.      This is inside. I have to make
>   this part long in order to make the example make sense. After
>   after after.
> 
> Is my understanding correct?

Absolutely clear to me that it is, and it's the only useful
interpretation as well. 

Perhaps not so clear is what happens when the width of contiguous
margin, border, padding, and adjacent content exceeds the horizontal
space in the parent.

IMO, the left and right margins, borders, and padding should be
considered 'attached to' the first and last piece of content,
respectively. In the case of a SPAN with a left and right margin of
1cm, and a relatively narrow parent element:


  Before before before         <- left margin, border, padding and
        This is inside. I         adjacent unbreakable content don't
  have to make this part          fit at end of this line, so drop to
  long in order to make           beginning of next.
  the example make          <- right margin, border, padding and
  sense.       After           adjacent unbreakable content (the
  after after.                 word 'sense') don't fit at end of
                               this line, so drop to beginning of next.

If the margin, border, padding and adjacent unbreakable content of an
inline element are wider than the parent's width, then they will extend
beyond the width of the parent. (This is similar to what happens with
inline replaced elements, is it not?)

The value of this interpretation will be especially clear in the case
where an author wants to put color behind some word or phrase and does
not want the text to abut the edge of the color. A small amount of
padding may be necessary.

Example:

SPAN {
  margin-left: -.5ex; margin-right: -.5ex;
  padding-left: .5ex; padding-right: .5ex;
  color: yellow }

                            +-------+
  Here we yellow-highlight a|spanned|word.
                            +-------+

The padding doesn't affect the word spacing because it is countered by
a negative margin, yet there is some 'air' between the edge of the
padding and the content. When a line break occurs before 'spanned'
text:

  Here we yellow-highlight a
 +-------+
 |spanned|word.
 +-------+
 
Note that the text left-aligns because the negative left margin draws
the padding into the left margin of the parent.


David Perrell

Received on Wednesday, 2 July 1997 20:33:02 UTC