Re: box-sizing: border-box;

On Tuesday 2003-10-28 13:22 -0600, Scott Romack wrote:
> My statement is simple I don't like the content-box model! could someone
> persuade me otherwise? I just don't understand why if I say; div
> {width:200px;padding:7px;border:2px} that width dosn't mean 200px.

The content-box model works better when the width is being specified
because of the content of the element.  The border-box (or, more likely,
margin-box) model works better when the width is being specified because
of the layout outside the element.  This follows directly from wanting
author and user preferences to interact well (one of the basic goals of
CSS) when you consider what happens when the margin, padding, or border
come from a different level of the cascade than the width.

As an example of a 'width' specified specified for reasons having to do
with what's inside the element, rather than outside, consider an image
that is internally 200 pixels wide, and has a specified width of 100px
to scale it down by half.  If the user's stylesheet causes, say, images
inside of links to have borders on them, you wouldn't want the image to
shrink a little bit more (and thus have ugly scaling artifacts) because
of the border.  

The case of 'width' specified because of what's outside the element is
somewhat more complicated.  The CSS box model is largely based on ideas
of document layout, where the layout algorithm takes widths as input and
produces heights as output.  In this context, it doesn't make much sense
to specify explicit widths for external reasons, since the widths come
from the page width or viewport width.  However, much content on the web
today is attempting to present user interface using a box model that's
not really appropriate for user interface, and is thus trying to use the
CSS box model for things for which it was not designed.  This often
involves specifying lots of explicit widths to cause a grid-like layout,
which often doesn't scale well in response to changes in window size or
font size.  Explicit specifications of width because of the layout
outside of an element are a good sign that the layout will not work well
at different font or window sizes, although some uses of percentage
widths are an exception.  (As a layout model, tables are better in some
ways, although they have their own problems, such as forcing horizontal
scrolling for everything if one thing overflows the window width.)  A
box model designed for user interface would likely lead to easier
authoring and improved usability of web pages in the style popular
today.  (Whether that style is a good thing is another question
entirely.)

-David

-- 
L. David Baron                                <URL: http://dbaron.org/ >

Received on Tuesday, 28 October 2003 14:57:23 UTC