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

Re: [css21] line-height, problem?

From: Gérard Talbot <www-style@gtalbot.org>
Date: Mon, 26 Nov 2012 21:45:40 -0500
Message-ID: <8279fb04ff176e13c019e2460b220447.squirrel@ed-sh-cp3.entirelydigital.com>
To: "Andrew Fedoniouk" <news@terrainformatica.com>
Cc: "www-style mailing list" <www-style@w3.org>

Le Lun 26 novembre 2012 19:35, Andrew Fedoniouk a écrit :
> Consider these two properties:
>
> 'min-height' specifies the minimal height [of an element].
> 'line-height' specifies the minimal height of line boxes.
>
> Seems like both define same concept - they constrain the height to a
> certain minimal value that
> computed value of height may use.
>
> By defining min-height you *cannot* make elements smaller, only larger.

You can define the min-height of an element to be larger than its content
in which case, there will be vertical gaps. I can create a test which
would verify, demonstrate and test this.

You can define the max-height of an element to be smaller than its content
in which case specified overflow property will normally have a rendering
effect. I can create a test which would verify, demonstrate and test this.

min-height and max-height are independent of an element's content.

> But by defining line-height you can make line-box smaller than its
> content.

line-height is inherited: so, inline elements inside a block all have an
line-height specified value.

In
http://test.csswg.org/suites/css2.1/nightly-unstable/html4/inline-formatting-context-010b.htm
the tallest inline element makes the line box grow tall enough to fully
contain it; the line box is just (and exactly) as tall as its tallest
inline box element. Each span has a set line-height of 1... which is, in
this test, the height of its font-size. Here, we can clearly see that the
height of a line box has nothing to do with CSS box model (margin,
padding, border, content).
This test is a customized coded test which focuses on demonstrating the
assert text only:

"
A line box is always tall enough for all of the (inline) boxes it
contains. A line box can be as tall as the tallest inline non-replaced box
it contains.
"

More importantly: a line box is not necessarly as tall as its tallest
inline non-replaced box in it; it could be taller than its tallest inline
box (see 010c and 010d tests).

In
http://test.csswg.org/suites/css2.1/nightly-unstable/html4/inline-formatting-context-010c.htm
and
http://test.csswg.org/suites/css2.1/nightly-unstable/html4/inline-formatting-context-010d.htm

we can see that the line box is as tall as needed to contain the
uppermost box top of (or among) all inline boxes and the lowermost box
bottom of (or among) all inline boxes.
Here again, we can clearly see that the height of a line box has nothing
to do with CSS box model (margin, padding, border, content).

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 Tuesday, 27 November 2012 02:46:13 GMT

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