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

RE: Sloppiness of `box', `area', and `width'

From: Brian Manthos <brianman@microsoft.com>
Date: Tue, 15 Nov 2011 19:42:31 +0000
To: Michael Witten <mfwitten@gmail.com>, Tab Atkins Jr. <jackalmage@gmail.com>
CC: "www-style@w3.org" <www-style@w3.org>
Message-ID: <9710FCC2E88860489239BE0308AC5D1704466E55@TK5EX14MBXC266.redmond.corp.microsoft.com>
>    * The sentence:
>          The four padding edges define the box's padding box. 
>      really means:
>          The content edge and the padding edge define the
>          box's padding area.
>
>    * The sentence:
>          The four border edges define the box's border box. 
>      really means:
>          The padding edge and the border edge define the
>          box's border area.
>
>    * The sentence:
>          The four margin edges define the box's margin box. 
>      really means:
>          The border edge and the margin edge define the
>          box's margin area.

Example:
div {
    height: 100px;
    width: 200px;
    padding: 10px;
}

1. The "content area" is (width * height).  In the example, (200*100) = 20000. [I'll exclude the units for now.]
2. The "area within the padding box" is ((width + padding-left + padding-right) * (height + padding-top + padding-bottom)).  In the example, ((200+10+10) * (100+10+10)) = 26400.
3. The "area between the content edge and padding edge" is (value2-value1).  In the example, (26400-20000) = 6400.

Is the "padding area" defined as #2 or #3?

For calculating printer ink costs, #3 can be useful.
For describing positioning and sizing of backgrounds for "background-origin: padding-box;", #2 is useful.
Received on Tuesday, 15 November 2011 19:43:14 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:46 GMT