W3C home > Mailing lists > Public > www-style@w3.org > February 2008

[css3-box] box-sizing on width and height

From: fantasai <fantasai.lists@inkedblade.net>
Date: Thu, 14 Feb 2008 15:28:54 -0800
Message-ID: <47B4CEB6.6060100@inkedblade.net>
To: www-style@w3.org

CSS's model of applying 'width' and 'height' to the content box instead
of the border box makes a lot of things difficult. The 'box-sizing'
property is able to solve that, but it doesn't interact very well with
the cascade. The 'calc()' function is able to solve that, but it also
doesn't interact very well with the cascade.

So I propose adding the keywords 'content-box' and 'border-box' to 'width'
and 'height', to be used in conjunction with a length or percentage. (If
specified, it overrides 'box-sizing'; otherwise 'box-sizing' is honored.)

Like this:

   width: border-box 50%;
or
   width: 50% border-box;

The advantages are
   - only affects this declaration, so if other width declarations
     in the style sheet are expecting content-box sizing, they get
     what they expect
   - doesn't require me to hard-code border width and padding values
     into the width declaration
   - my width declaration is ignored by browsers that don't support
     the box-sizing switch, so I can give a fallback width if that's
     appropriate

~fantasai
Received on Thursday, 14 February 2008 23:28:50 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:55:01 GMT