Re: box-sizing: border-box;

On 10/29/03 3:13 AM, "Ernest Cline" <ernestcline@mindspring.com> wrote:

> 
> 
> 
> 
>> [Original Message]
>> From: Christoph P?per <christoph.paeper@tu-clausthal.de>
>> To: Scott Romack <sromack@PTSTEAMS.com>; <www-style@w3.org>
>> Date: 10/29/2003 6:39:36 AM
>> Subject: Re: box-sizing: border-box;
>> 
>> 
>> 
>> 
>> *Scott Romack*:
>>> 
>>> I'm sure opera would support it if it was in the standard.
>> 
>> Actually Opera already does. <http://www.opera.com/docs/specs/#css>
>> Also note the note in <http://www.w3.org/TR/css3-box/#the-box-width>.
>> 
>> IMHO 'box-sizing', if ever introduced, should not only take the values
>> 'content-box' and 'border-box', but 'padding-box' and 'margin-box' too.
> 
> margin-box would in my opinion only make sense in a kitchen sink way.
> I can't imagine any use case of it.
> 
> padding-box makes a degree of sense so that the border could be
> just outside the box instead of just inside the box.  However, I think
> that either another property or a second argument to box-sizing
> to allow the boundary box to be set anywhere in the border or padding.
> 
> Proposal:
> Add four properties to the Box Model Additions section of CSS3
> Basic User Interface and one shortcut property.
> 
> box-inset-top, box-inset-left, box-inset-bottom, and box-inset-right
> Value: <length> | <percentage>
> Default: 0
> If box-sizing is content-box then
> * a <percentage> value refers to a percentage of
>  the appropriate padding width.
> * The box boundary is set so that portion of the padding is
>  inside the box
> If box-sizing is border-box then
> * a <percentage> value refers to a percentage of
>  the appropriate border width.
> * The box boundary is set so that portion of the border is
>  outside the box
> 
> box-inset
> Value: (<length>|<percentage){1,4}
> Allows one to set all four box-inset-* properties in
> the usual manner for this type of box model shortcut.
> 
> Example 1:
> box-sizing: border-box;
> box-inset: 50%;
> 
> This pair of values causes the border to stradle the box evenly.
> The content width here is
> (width - padding-left - padding-right - border-width-left -
> border-width-right + box-inset-left + box-inset-right)
> 
> Example 2:
> box-sizing: content-box;
> box-inset: 6px;
> padding: 10px;
> width: 200px;
> 
> The content width here is 188px  (width - box-inset-left - box-inset-right).
> 
> Of course all this needs some firming up to deal
> with degenerate cases and the like.
> 
> Note: The effect of gaving the border straddle the box edge
> can be simulated with ::outside but only if the border is a
> solid color as adjacent dashed borders for example are
> not guarenteed to be aligned with one another.
> 
> The following simulates straddling a 4 px border
> on the box boundary.
> 
> E {box-sizing: border-box; border-width: 2px;}
> E::outside {box-sizing: content-box; border-width: 2px;}
> 
> But as I said it can only fully simulate my proposal if a solid border is
> used.
> 
> Comments wanted.

For one thing, it is far too late for suggestions for new features
(properites) like this for CSS3-UI, the last call ended months ago.

Second, the reasons for leaving out the other possible values (margin-box,
padding-box) for box-sizing were already discussed *quite* some time ago[1].

As you pointed out:

> margin-box would in my opinion only make sense in a kitchen sink way.
> I can't imagine any use case of it.

Not only that, but due to collapsing vertical margins,
implementing/understanding the 'margin-box' becomes even more problematic.

The nice thing about CSS is, if future folks *do* come up with real reasons
(rather than "kitchen sink" reasons) for these other values, they can always
be added in a latter draft.

Tantek

[1]
 http://lists.w3.org/Archives/Public/www-style/1999Oct/0036.html
(My goodness, that was *four* years ago).

Received on Wednesday, 29 October 2003 12:13:15 UTC