Re: box-sizing: border-box;

> [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.

Received on Wednesday, 29 October 2003 06:13:38 UTC