Re: box-sizing: border-box;

> [Original Message]
> From: Christoph Päper <>
> To: Scott Romack <>; <>
> 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. <>
> Also note the note in <>.
> 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.

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

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

Comments wanted.

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