Understanding the CSS box model

W3C

Bert Bos | Understanding the CSS box model

Cascading Style Sheets This talk explores the limits of level 2 of the box model (and thus potential requirements for level 3). Examples include leading, centering and vertical text.

Bert Bos (W3C)
Fronteers 2008 conference
Amsterdam, Netherlands
September 11–12, 2008

Me

(Aside: W3C's office in France is nothing special,
        but the windows reflect the mountains in the disctance.)

1994: CSS (with Håkon Wium Lie)

1995-now: W3C (CSS, I18N, HTML, XML, MathML)

Based in Sophia-Antipolis, France

Håkon's idea for “Cascading HTML Style Sheets” and my implementation of a style language for SGML with context-sensitive selectors led quickly, after October 1994, to a system with the main features of both and the syntax of neither.

CSS has been developed since 1995 by W3C. That has resulted, among other things, in specifications for CSS level 1 and level 2. At the moment the working group in W3C is working on several modules for level 3 and a revision of level 2.

As for me, I have, among other things, set up the internationalization activity of W3C and participated in the standardization of HTML and XML. At the moment I'm coordinator for both CSS and MathML.

But you have read the programme, so I'm not telling you anything new…

You

I'd like to learn as much from this talk as you, if not more ☺

Of course, I don't have to tell you who you are. But maybe what I expect from you.

I'm assuming I have in front of me people who are experts, who know at least as much about CSS as myself, and who, moreover, have ideas about what should still be added to CSS.

In other words, if the next slides talk about proposed extension of CSS in level 3, then I'd like to hear from you what you think those extensions should be, exactly.

About this talk

The CSS specification uses a number of terms in specific ways. It is usually not necessary to know them to be able to use CSS, but this presentation deals with the limits of CSS and thus it is handy to have a few precise terms to be able to talk about them.

As CSS is used on more types of pages, on bigger and bigger screens and for more and more different languages, the limits of the current box model appear. Text in columns isn't always typographically correct, Some often demanded effects are difficult or impossible to achieve, and vertical text (as for Japanese, but also on the spine of a book, for example) is not possible at all.

Terminology

Boxes have top, right, bottom and left.

From inside to outside:

Margin area always transparent, sometimes collapses.

A text in the CSS model consists of rectangular boxes. Around the content (text or something else) is the padding area with the same background as the content. Around that is the border, also with the same background, but with a separate foreground style. And around that is the margin, which is transparent.

The margin roughly specifies the minimum distance to the surrounding boxes, but the rules for how margins of neighboring boxes interact (“collapse”) are complex.

Width constraints

The width of a box is subject to constraints that depend on the kind of box: block, inline, or replaced. The parameters that go into the calculation are the parent's width (or more precisely: the containing block), the margins, borders, padding and any explicitly specified width.

For blocks, the sum of the margins, borders, padding, and content width must equal the parent's content width. This can lead to over-constrained (too many parameters specified) or under-constrained (too few parameters specified) situations. Various rules determine which parameters are ignored or get default values.

The normal situation is that the user determines the width (via the window size) and the designer determines the indent. But sometimes the designer can set the width, too, e.g., to align text to images of a certain size.

De intrinsieke dimensies van een box worden in niveau 2 niet precies gedefinieerd (wel in niveau 3). Maar het meest interessant voor deze presentatie zijn de blok-elementen.

In alle gevallen moet de vergelijking gelden, of de breedte expliciet is gespecificeerd of niet. Als de breedte is vastgelegd in een stijlregel, wordt één of beide marges automatisch aangepast. Maar de normale situatie is dat de breedte niet is gespecificeerd en de marges wel.

Marges kunnen negatief zijn. Een element kan dus breder zijn dan z'n ouder.

Height

Top and bottom margins collapse in certain cases

Floats

Floats are boxes that are taken out of the flow and moved to the left or right side of the current flow. A float doesn't reduce the width of any block boxes, but it does reduce the width of any line boxes that would otherwise overlap the float.

Floats, unlike blocks in the normal flow, have a width that is based on their content, not on their margins and parent's size. The term (which will become a CSS keyword in level 3) we use for the width of a float is “fit content,” which is the intrinsic size, but limited by the available space.

Floats normally do not reduce the width of any block boxes, only of line boxes, but there is an exception. CSS level 2 has some explicitly vague wording that says that boxes with a non-initial 'overflow' value may become narrower as a result of a float that would otherwise overlap them. Level 3 should define exactly what happens.

This exception is the result of another browser bug. It's not clear yet how this will be defined in level 3.

Line boxes 1

Inline elements → inline boxes → line boxes

Possibly repeat to find better line breaks,
possibly add letter spacing ditto

Line boxes 2

In simple cases, each line box is as high as the
        value of 'line-height'

Centering lines

Widespread browser bugs…

This line is left aligned

This line is also left aligned

This line is left aligned.

This line is right aligned

This line is also right aligned.

This line is right aligned.

This line is centered

This line is not centered in many browsers anno 2008

This line is centered

Centering boxes

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = parent width

solve for auto:

auto + … + auto = P

◀━━━━ ━━━━▶ ◀━━━━ ━━━━▶ Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua. Ut enim ad minim veniam, quis nos­trud exerci­ta­tion ullamco laboris nisi ut aliquip ex ea com­modo con­se­quat. Duis aute irure dolor in rep­re­hen­derit in volup­tate velit esse cil­lum dolore eu fugiat nulla pariatur. Excep­teur sint occae­cat cup­i­datat non proident, sunt in culpa qui offi­cia deserunt mol­lit anim id est labo­rum

Question: how to center an image?

Centering vertically 1

div {display: table; height: 10em; width: 100%}
p {display: table-cell; vertical-align: middle}

Centering vertically 2

Solutions in CSS level 3?

'Any' would be like a stronger version of 'auto'. It prohibits margin collapsing and is flexible both in the vertical and in the horizontal direction.

A new value for 'position' would make the element an absoltely positioned element and center it both horizontally and vertically in its containing block. It requires that that parent not only has a height, but also has a 'position' value other than 'static'.

A new property might cause confusion with the existing 'vertical-align' property.

Generalizing 'vertical-align' to apply to all block-level elements might break some pages that currently set 'vertical-align' and don't expect it to apply. Also, some of the values of 'vertical-align' would be ignored for blocks.

Currently, if the 'height' is set, the element's bottom margin doesn't collapse with the bottom margin of its last child. If there is a vertical alignment property, then it depends on its value which margins are prohibited from collapsing: bottom (if children are top-aligned), top (if children are bottom-aligned), both (if the children are centered).

Centering wide boxes 1

Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua.

Ut enim ad minim veniam, quis nos­trud exerci­ta­tion ullamco laboris nisi ut aliquip ex ea com­modo con­se­quat.

Duis aute irure dolor in rep­re­hen­derit in volup­tate velit esse cil­lum dolore eu fugiat nulla pariatur.

Excep­teur sint occae­cat cup­i­datat non proident, sunt in culpa qui offi­cia deserunt mol­lit anim id est labo­rum

Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua.

Ut enim ad minim veniam, quis nos­trud exerci­ta­tion ullamco laboris nisi ut aliquip ex ea com­modo con­se­quat.

Duis aute irure dolor in rep­re­hen­derit in volup­tate velit esse cil­lum dolore eu fugiat nulla pariatur.

Excep­teur sint occae­cat cup­i­datat non proident, sunt in culpa qui offi­cia deserunt mol­lit anim id est labo­rum

p { margin: 1em auto; width: 12em }
… 18em… 24em … 16em

<p class=p1>Lorem ipsum dolor sit…
<p class=p2>Ut enim ad minim veniam…
<p class=p3>Duis aute irure dolor…

The three examples consist of the same four paragraphs with the same style rules, but the last one has one paragraph that is not centered.

This is a problem with the way horizontal centering of blocks is defined in level 2, which is in turn the result of limits in implementations. The working group decided not to wait for their fix.

The next slide shows what the problem is.

Centering wide boxes 2

Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua.

Ut enim ad minim veniam, quis nos­trud exerci­ta­tion ullamco laboris nisi ut aliquip ex ea com­modo con­se­quat.

Duis aute irure dolor in rep­re­hen­derit in volup­tate velit esse cil­lum dolore eu fugiat nulla pariatur.

Excep­teur sint occae­cat cup­i­datat non proident, sunt in culpa qui offi­cia deserunt mol­lit anim id est labo­rum

Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua.

Ut enim ad minim veniam, quis nos­trud exerci­ta­tion ullamco laboris nisi ut aliquip ex ea com­modo con­se­quat.

Duis aute irure dolor in rep­re­hen­derit in volup­tate velit esse cil­lum dolore eu fugiat nulla pariatur.

Excep­teur sint occae­cat cup­i­datat non proident, sunt in culpa qui offi­cia deserunt mol­lit anim id est labo­rum

Centering wide boxes 3

What to do?

Using intrinsic text size

<h3>The heading</h3>

<p>Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua. Ut enim ad minim veniam, quis nos­trud exerci­ta­tion ullamco laboris nisi ut aliquip ex ea com­modo con­se­quat. Duis aute irure dolor in rep­re­hen­derit in volup­tate velit esse cil­lum dolore eu fugiat nulla pariatur. Excep­teur sint occae­cat cup­i­datat non proident, sunt in culpa qui offi­cia deserunt mol­lit anim id est labo­rum

<h3>The heading</h3>

<p>Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua. Ut enim ad minim veniam, quis nos­trud exerci­ta­tion ullamco laboris nisi ut aliquip ex ea com­modo con­se­quat. Duis aute irure dolor in rep­re­hen­derit in volup­tate velit esse cil­lum dolore eu fugiat nulla pariatur. Excep­teur sint occae­cat cup­i­datat non proident, sunt in culpa qui offi­cia deserunt mol­lit anim id est labo­rum

<h3>The heading</h3>

<p>Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua. Ut enim ad minim veniam, quis nos­trud exerci­ta­tion ullamco laboris nisi ut aliquip ex ea com­modo con­se­quat. Duis aute irure dolor in rep­re­hen­derit in volup­tate velit esse cil­lum dolore eu fugiat nulla pariatur. Excep­teur sint occae­cat cup­i­datat non proident, sunt in culpa qui offi­cia deserunt mol­lit anim id est labo­rum

Aligning line boxes

  • Setting 'line-height: 1.3em' not enough
  • Suppress with 'line-height: 0'

Better solutions possible?

  • Check that ink doesn't overlap (p b)?
  • Increase line height for images but not for text?

Vertical text

For Japanese and Chinese (Mongolian is a bit harder still…)

For purpose of stacking blocks: same as horizontal after 90° rotation

Mixed vertical & horizontal

Justifying lines

'text-align: left'

Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua. Ut enim ad minim veniam, quis nos­trud exerci­ta­tion ullamco laboris nisi ut aliquip ex ea com­modo con­se­quat. Duis aute irure dolor in rep­re­hen­derit in volup­tate velit esse cil­lum dolore eu fugiat nulla pariatur.

'text-align: right'

Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua. Ut enim ad minim veniam, quis nos­trud exerci­ta­tion ullamco laboris nisi ut aliquip ex ea com­modo con­se­quat. Duis aute irure dolor in rep­re­hen­derit in volup­tate velit esse cil­lum dolore eu fugiat nulla pariatur.

'text-align: center'

Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua. Ut enim ad minim veniam, quis nos­trud exerci­ta­tion ullamco laboris nisi ut aliquip ex ea com­modo con­se­quat. Duis aute irure dolor in rep­re­hen­derit in volup­tate velit esse cil­lum dolore eu fugiat nulla pariatur.

'text-align: justify'

Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua. Ut enim ad minim veniam, quis nos­trud exerci­ta­tion ullamco laboris nisi ut aliquip ex ea com­modo con­se­quat. Duis aute irure dolor in rep­re­hen­derit in volup­tate velit esse cil­lum dolore eu fugiat nulla pariatur.

Justifying one line

 

Lorem ipsum dolor sit amet, con­secte­tur
              adip­isic­ing elit, sed do eius­mod tem­por
              inci­didunt ut labore et dolore magna ali­qua.

 

Lorem ipsum dolor sit amet, con­secte­tur
              adip­isic­ing elit, sed do eius­mod tem­por
              inci­didunt ut labore et dolore magna ali­qua.

 

Lorem ipsum dolor sit amet

 

Lorem ipsum dolor

Bullets and floats

Left margin lost next to float:

  • Keep relative indent?
  • Keep indent until end of block?

Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua.

1 Ut enim ad minim veniam, quis nos­trud exerci­ta­tion ullamco laboris nisi ut aliquip ex ea com­modo con­se­quat.

  • First bullet
  • Second bullet
  • Third bullet
  • Fourth bullet

Duis aute irure dolor in rep­re­hen­derit in volup­tate velit esse cil­lum dolore eu fugiat nulla pariatur.

2 Ut enim ad minim veniam, quis nos­trud exerci­ta­tion ullamco laboris nisi ut aliquip ex ea com­modo con­se­quat.

  • First bullet
  • Second bullet
  • Third bullet
  • Fourth bullet

Excep­teur sint occae­cat cup­i­datat non proident, sunt in culpa qui offi­cia deserunt mol­lit anim id est labo­rum

3 Ut enim ad minim veniam, quis nos­trud exerci­ta­tion ullamco laboris nisi ut aliquip ex ea com­modo con­se­quat.

  • First bullet
  • Second bullet
  • Third bullet
  • Fourth bullet

Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua.

Wrapping floats 1

p { overflow: hidden }

Why might you want that below?

img { float: left }
...
<p><img alt=... src=image1>
  A relatively short text.
<p><img alt=... src=image2>
  Another short text.

Wrapping floats 2

Floats don't count for height of block

  • Use overflow: hidden?
  • Use p:after {...; clear: left}?

Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua.

Ut enim ad minim veniam, quis nos­trud exerci­ta­tion ullamco laboris nisi ut aliquip ex ea com­modo con­se­quat.

Lorem ipsum dolor sit amet, con­secte­tur adip­isic­ing elit, sed do eius­mod tem­por inci­didunt ut labore et dolore magna ali­qua.

Ut enim ad minim veniam, quis nos­trud exerci­ta­tion ullamco laboris nisi ut aliquip ex ea com­modo con­se­quat.

Adding a 'clear' to the paragraphs helps to align the images to the left and start each paragraph at the same height as its image, but it doesn't help to make the yellow background high enough to include the image.

There are two tricks to make the floats count for the height of the paragraph: use a value for 'overflow' other than the initial value 'visible', or add generated text after the paragraph that clears the image. Make sure that generated text is invisible and its height is zero.

Both methods have their downsides. 'Overflow' is normally used for other purposes, and maybe you don't want to hide the overflow on the sides. Also, collapsing of margins with children is prohibited if 'overflow' is anything else than 'visible'.

':after' has downsides, too. Maybe you also wanted to use it for some real text…

Wrapping floats 3

Solutions in CSS level 3?

Most possible solutions are not very intuitive or make the interaction of other properties very complicated.

A new 'overflow' value
The value is like 'visible' except that it changes the way 'height: auto' is calculated. This should allow collapsing of margins with children, except at the bottom if indeed some extra space must be added. This extra space is like “clearance.”
A new value for 'height'
The value is is like 'auto' but takes floats into account. The effect is the same as above.
Combine with vertical centering
If vertical centering gets a property, it could have values top, center, bottom and auto, where auto is as currently and 'top' would make 'height: auto' include any floats.
A new 'clear-after' property.
This may be the easiest to learn. It has the same values as 'clear'. It potentiall adds “clearance” at the bottom of an element and if so, it inhibits margin-collapsing of margins that are separated by the clearance.
A new value for 'min-height'.
A new value for 'min-height' could be explained because it doesn't change the height unless needed.

The end

http://www.w3.org/Talks/2008/0911-CSS-Amsterdam/all