W3C home > Mailing lists > Public > www-style@w3.org > August 2010

[css3-page] margin box layout

From: Håkon Wium Lie <howcome@opera.com>
Date: Tue, 10 Aug 2010 15:35:04 +0200
Message-ID: <19553.21896.510541.780855@gargle.gargle.HOWL>
To: www-style@w3.org
I've been trying to read Section 6.3 [1] and my head hurts. Maybe I
should upgrade, but I think the underlying model is simple and that
the description can be simplified. This message is an attempt to do
so. I have probably lost some details along the way. But I think the
essence is there, no?

 [1] http://dev.w3.org/csswg/css3-page/#margin-box-dimensions


This section describes the layout of the margin boxes.

A margin box is similar to other boxes in CSS in that they have
margin, border, padding, and a content area. The margins of margin
boxes never collapse. The sum of all 16 margin boxes on a page (as
shown in the previous section) take up the entire page margin. 

The four margin boxes in the corners have a fixed dimension in the
sense that they are not influenced by other margin boxes. The 12
margin boxes that are not in corners can influence each other in
groups of three, much like table cells can influence each other.

The margin, border, padding, width/height (including the max/min
properties) on margin boxes take their initial values from their
respective property definitions. Unless set to non-initial values, the
margin, border and padding will be zero and the width and height of
the content area grows to take up the available space.

For the four corner margin boxes, the available space is fixed. Their
dimensions are calculated just like the calculations for block-level,
non-replaced elements, except that both the height and the width grows
to fill the available space (unless set to a non-auto value).

The remaining 12 margin boxes can be split into two groups:

  (A) margin boxes that appear above or below the page box
  (B) margin boxes that appear to the left or right of the page box

Margin boxes of type A calculate the vertical dimension of the
margin/border/padding/content-area just like for the corner margin
boxes. Margin boxes of type B calculate the horizontal dimension of
the margin/border/padding/content area just like for the corner margin

What remains is to calculate the horizontal dimensions of type A and
the vertical dimensions of type B. The horizontal dimensions of type A
are subject to the following constraints, in descending order of

 - the dimensions of margins, borders, padding and content area for the
   three margin boxes add up the the width of the page border area

 - non-initial values on the width properties
   (width/min-width/max-width) are honored

 - non-initial values on border properties are honored

 - non-initial values on padding properties are honored

 - non-initial values on margin properties are honored

 - content in the margin boxes is shown without overflow. That is, UAs
   may adjust the width/height of the content area to make
   room for all content.

 - when expanding 'auto' values to used values, symmetry is a goal.
   For example, if the width of the top-left and top-right margin
   boxes both are 'auto' and they have no content, their used widths
   will be the same.

The vertical dimensions of type B are calculated in the same way,
except that "width" is replaced by "height".

              Håkon Wium Lie                          CTO °þe®ª
howcome@opera.com                  http://people.opera.com/howcome
Received on Tuesday, 10 August 2010 13:35:44 UTC

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:13:49 UTC