Re: Unlogical width with percentages

>From: "Sjoerd Visscher" <sjoerd@heeten.nl>
>Date: Sun, Oct 10, 1999, 3:25 AM
>
> I thought the box-sizing was introduced because of IE,

Box-sizing was introduced publicly in the CSS3 UI working draft.

  http://www.w3.org/TR/css3-userint

And the reason it was introduced the in UI working draft is because the
working draft also introduced the concept of system borders, which could
potentially vary in "width" across different platforms, so controlling the
"effective" width of UI elements (such as buttons), while keeping the
"standard system border" for those elements was not possible with the CSS1
box model.

With "box-sizing:border-box" the width/height the author specifies exactly
the space occupied by the element, border, padding and content.

I can't take credit for introducing it - that goes to Peter Linss.

In addition to being useful for specifying the layout of UI elements, it
turns out to also describe the popularly implemented behavior of WIDTH and
HEIGHT attributes in HTML4.

> and that IE had
> border-box as default.

It turns out that WinIE4(and 5) do appear to treat the CSS properties width
and height in this fashion by default.

MacIE4(and 4.5) treat CSS width and height as specified in CSS1 (i.e.
"box-sizing: content-box").

(ducks while angry web authors throw overripe fruit at the implementor for
being inconsistent from WinIE)

> Now Ian sais it is margin-box. Or is Erik
> Arvidsson's formula not IE's formula?

Neither.  See above.

>> From: Ian Hickson <py8ieh@bath.ac.uk>
>> Sent: Sunday, October 10, 1999 10:25 AM
>>
>> The current CSS3 drafts introduce a property which can be used to change
>> what 'width' actually means, called 'box-sizing'. It currently takes the
>> values 'content-box' and 'border-box'; I propose we add 'padding-box' and
>> 'margin-box' for consistency.

There have been many many opportunities to add additional values for the
various properties in the CSS3 UI working draft for the sake of
"consistency/completeness".  Some of the initial internal CSS working group
drafts had these values ('margin-box' and 'padding-box') for box-sizing, and
other properties had many more values too.

One of the aims of the CSS3 UI draft was to attempt to retain some level of
simplicity and ease of use.  We decided to only include values for
properties which "made sense" - those that authors would "typically use"
instead of including every single possibility which would make understanding
the document as a whole, and the interaction between all the different
properties, much more difficult.

So in particular, for box-sizing, obviously we needed "content-box" to
describe the current behavior of CSS1, and in addition, "border-box"
appeared to have the greatest utility to authors.

We could not come up with any "real world" examples where an author would
want to use "padding-box" where "border-box" wouldn't work just as well.

Similarly with "margin-box".  "margin-box" would also introduce the
additional complication of collapsable/overlapping heights - since adjacent
vertical margins collapse.  We did *not* want to go there.

We chose simplicity and ease of use over "mathematical completeness".

Which do you think is better for authors?

>> Then you could say:
>>
>>    { width: 100%; box-sizing: margin-box; border: thick solid; }
>>
>> ...to do what you describe.

Since there is no margin specified, this can be done with border-box:

    { width: 100%; box-sizing: border-box; border: thick solid; }


Tantek Çelik
tantekc@microsoft.com
Tasman Development
Microsoft Corporation

Received on Sunday, 10 October 1999 13:43:05 UTC