CSS3 Box Model behaviour
crypt.codemancers.com
CSS3 Box Model behaviour
1–10 of 15 posts
Re: CSS3 Box Model behaviour
#2Paul Irish also discusses this in his blog post from Feb. 2012:
Re: CSS3 Box Model behaviour
#3Modded 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.
Re: CSS3 Box Model behaviour
#4Modded 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.
Another great use is combining percentages with pixel values. 100% wide with a 30px border? Simple. Used to be impossible with only one element.
Re: CSS3 Box Model behaviour
#5Legacy IE got few things right, this was one of them.
Re: CSS3 Box Model behaviour
#6Pretty surprised that this basic, well known style rule is front page. I guess it's not as well known as I thought.
Re: CSS3 Box Model behaviour
#7Modded 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.
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.
Re: CSS3 Box Model behaviour
#8What 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?
Re: CSS3 Box Model behaviour
#9Sir, what on Earth is up with the "t" in your font? So jarring.
Re: CSS3 Box Model behaviour
#10What 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 thi…
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.