- 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>
> * 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 UTC