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: Gérard Talbot <www-style@gtalbot.org>
Date: Thu, 11 Oct 2012 14:51:53 -0400
Message-ID: <9e1267a45b387257d21e87c10d196345.squirrel@ed-sh-cp3.entirelydigital.com>
To: "Anton Prowse" <prowse@moonhenge.net>
Cc: "Public W3C www-style mailing list" <www-style@w3.org>

Le Jeu 11 octobre 2012 1:33, Anton Prowse a écrit :
> 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

Right here: how do you verify the height value of such line box in the
test given? Say with browser webpage debuggers like Firefox DOM inspector
or Chrome Web inspector or Opera Dragonfly? Otherwise by resorting to
something like:

document.defaultView.getComputedStyle(document.getElementById("div2"),
null).lineHeight;

because the inner div inside div#div2 (div#div2 > div ) is the only inline
element contributing to the height of the line box.

[Addendum: I now think used line box height value is not retrievable
anyway, is not accessible. Computed line box height is but not used line
box height.]

> 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.
>
> Indeed.
>
> 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.

Okay where do you read or see this? I can see the blue square area but how
does the blue square area relates to the used height of the line box given
or created or generated by div#div2 ?

  48px : margin-top of inline-block
 +
  48px : margin-bottom of inline-block
 +
   4px : descent area (usual vertical
         area below baseline when font is 16px or so)
 ======
 100px


> (For inline boxes -
> as opposed to inline-/level/ boxes - it is the line-height that
> determines the contribution.

"
The height of each inline-level box in the line box is calculated. For
replaced elements, inline-block elements, and inline-table elements, this
is the height of their margin box; for inline boxes, this is their
'line-height'.
"
http://www.w3.org/TR/CSS21/visudet.html#line-height


------

A variation of previously mentioned test

http://www.gtalbot.org/BrowserBugsSection/css21testsuite/inline-block-non-replaced-height-002-va-top.html

but it does not answer my question.


> 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.)

Your guide box concept would be great if it had a schematic representation
or a tutorial somehow. It's difficult to imagine what it is without an
article or webpage explaining it along with judicious illustrations.

Gérard
-- 
CSS 2.1 Test suite RC6, March 23rd 2011
http://test.csswg.org/suites/css2.1/20110323/html4/toc.html

Contributions to CSS 2.1 test suite
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/

Web authors' contributions to CSS 2.1 test suite
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/web-authors-contributions-css21-testsuite.html
Received on Thursday, 11 October 2012 18:52:24 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:21:01 GMT