W3C home > Mailing lists > Public > www-style@w3.org > October 2012

Re: [CSS21] Question on height of inline-block (possible error in § 10.6.6)

From: Anton Prowse <prowse@moonhenge.net>
Date: Thu, 11 Oct 2012 07:33:33 +0200
Message-ID: <50765A2D.7060401@moonhenge.net>
To: Public W3C www-style mailing list <www-style@w3.org>
CC: www-style@gtalbot.org
On 11/10/2012 05:29, "Gérard Talbot" wrote:
> Hello,
> I am not sure I understand this quote from the spec:
> "
> For 'inline-block' elements, the margin box is used when calculating the
> height of the line box.
> "
> http://www.w3.org/TR/CSS21/visudet.html#block-root-margin
> It does not make sense in my mind...
> Can someone show me an example or a test where this happens?
> I fail to see how this statement can be demonstrated or verified

Sure it can!  And you're doing so in your test case.

> and why it should be correct to begin with.

Using the margin box instead of line-height to determine the 
contribution that an atomic inline-level object such as an inline-block 
makes to the height of the line box seems like a sensible to me: it 
allows us to specify line-height on the inline-block and have that 
property affect the /children/ of the inline-block without affecting the 
inline-block itself.  (Imagine how strange it would be if it affected 
both, given that it's unlikely that the value you set would be 
appropriate for both situations!)

> In this test
> http://test.csswg.org/suites/css2.1/20110323/html4/inline-block-non-replaced-height-002.htm
> shouldn't the computed value of line-height of the inner div inside div#div2
> be 96px?

No. The inner div inherits a line-height of 0.

> The computed value of line-height of the inner div inside
> div#div2 is reported to be 0px in Firefox 16.0's DOM inspector, in Opera
> 12.02's DragonFly and in Chrome 22.0.1229.92's web inspector.


That's precisely what the spec is saying; it's not the line-height value 
on an inline-block which determines its contribution to the height of 
the line box in which it sits.  Rather, it's the margin area height. 
Hence the line box is 100px high in your test case.  (For inline boxes - 
as opposed to inline-/level/ boxes - it is the line-height that 
determines the contribution.  In fact, I like to think of there being a 
"guide box" that's line-height high that is a vertically-centred overlay 
of the inline box.  It helps me visualize how the line box extents are 
determined - they depend on the guide boxes, and hence they do not 
directly depend on the contents of the box.)

Anton Prowse
Received on Thursday, 11 October 2012 05:34:05 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:04 UTC