

CSS3 Box Model behaviour - dkannan
http://crypt.codemancers.com/posts/2013-11-17-box-model-behaviour/

======
shimonamit
Paul Irish also discusses this in his blog post from Feb. 2012:

[http://www.paulirish.com/2012/box-sizing-border-box-
ftw/](http://www.paulirish.com/2012/box-sizing-border-box-ftw/)

------
nailer
Modded up, but I really hope most frontend folk on HN already know about
border-box.

Short ver: float two 50% widths beside each other. Change padding as you like
later and not have stuff break.

I have been doing this for a year now, it's godlike especially for in-browser
design.

~~~
yogo
Border box is also a godsend when dealing with nicely laid out form inputs
because unlike elements like divs you can't get away with nesting child
elements to get the desired effect, and you typically have borders on those
fields. Need a textarea to fill a certain space? Set it to 100% and forget it.

~~~
talmand
From my understanding most browser use border-box on form elements by default
anyway. That's why they often look different from other elements with the same
styling.

~~~
yogo
I don't think so. There are endless blog articles online that have addressed
this, e.g. [http://davidwalsh.name/textarea-
width](http://davidwalsh.name/textarea-width)

~~~
talmand
I was going by this, [http://www.paulirish.com/wp-content/uploads/2011/gplus-
boxsi...](http://www.paulirish.com/wp-content/uploads/2011/gplus-
boxsizing.html), which I believe doesn't include textarea as one of the
elements involved.

------
wwweston
What I've been trying to figure out for years is when/why content-box would be
a desirable state of affairs.

Most of the time, you know the border-box width (and probably the padding and
border) want the browser to figure out the content-width, which is why the
standard box model always seemed like a pain, because it makes you do that
instead (assuming you're using units where that's even possible).

I'm trying to think of a situation where that'd be useful -- where it'd be
helpful from a layout perspective to start with content-width -- so I could
figure out what the w3 folks were thinking, but I've always had trouble with
that. Has anybody figured this out?

~~~
yogo
I'm guessing some of that could be due to taking the wrong path initially then
leaving things the way they are. Platforms like WPF/Silverlight fixed these
headaches years ago right from their conception.

------
criswell
Legacy IE got few things right, this was one of them.

------
iLoch
For those of you who don't know, Bootstrap 3 uses border-box for everything by
default. Anyone who has worked with front end design a bit has probably
cringed many times at the thought of having to assign the full dimensions of
the box you want to an outer div, then create an inner div with padding in
order to achieve the same result that border-box solves. Didn't IE also invent
@font-face?

------
AustinG08
Pretty surprised that this basic, well known style rule is front page. I guess
it's not as well known as I thought.

