Live data from Hacker News

* { box-sizing: border-box } FTW

paulirish.com

81–90 of 90 posts

Re: * { box-sizing: border-box } FTW

#81

Earlier quoted context omitted.

Drawing a star causes the video to appear.

I tried drawing every kind of star I know but couldn't get any video to show.

You have to draw the (5 pointed) star from the bottom left - like this : http://depts.washington.edu/aimgroup/proj/dollar/

Re: * { box-sizing: border-box } FTW

#82
post #70

Earlier quoted context omitted.

At this point the W3C is in fact working on providing such a thing. "width: calc(50% - 20px)". Works in Firefox and IE. At some point WebKit will catch up, I assume.

I'm glad to hear that, but it's long overdue and the border-box model already solves the same problem with less markup (and most importantly, without creating an implicit dependency between the padding and width styles).

Well, in all fairness calc() lets you solve a bunch of problems that border-box can't solve.

Re: * { box-sizing: border-box } FTW

#83
post #39

I love you Paul Irish. I was just complaining about this exact same issue about 3 days ago and when I found this article I was like YES HE AGREES WITH ME! Especially when dealing with fluid layouts, this guy is a lifesaver

Yes, trying to do fluid layouts with percents and borders is a huge pain without this. Too bad it doesn't work with IE7 as I'm still seeing about 5% market share from there. But at least it's declining fast. Weird timing - after years of coding I literally found this box-sizing solution today on SO just a couple hours before seeing it here on HN.

Yeah same, found it like 3 days ago and was like thank god. I'm going to create a fix for IE7, whether it's a polyfill or sass wizardry, and I'll make a post about it when I do. Easy fluid responsive layouts for all!

Re: * { box-sizing: border-box } FTW

#84
post #15

Earlier quoted context omitted.

I've felt for years that the "broken" IE model made more sense. Your element has a height and width, padding pushes inward against interior content and margin pushes outward against exterior content. Glad to see others think this too, I always thought it was just me.

>padding pushes inward against interior content and margin pushes outward against exterior content. That actually seems the wrong way round to me. If you think about a document, the margin is what separates text from the edge of the page (or interior padding, if you will). Padding, to me, implies an area around an element that other elements can't touch.

No, you're looking at it the wrong way. What you call the paper's margin is actually the paper's padding. Or better yet, when you are setting the margin of a document you are actually setting the margin of all the text on the document to the defined width.

Re: * { box-sizing: border-box } FTW

#87
Good god, it's about time this hits the mainstream dev community.

The W3C box model is IMO one of the worst design flaws in front-end dev. It's a model that doesn't follow that of a real box! When you have padding (stuffed newspaper, peanuts, etc) in a packing box, the actual width and height of the box doesn't change! Border-width(or the thickness of the cardboard) is also included in the box dimensions.

I've only heard very weak reasons in the past for the W3C version and I'm surprised we haven't gotten past it. I think border-box will become more important as we head towards cross-platform responsively designed apps and sites with tons of layout decisions to consider. With simple sites up until now, you could afford the loss of control or the cognitive overhead to figure out workarounds. But now, I don't want to think the unintuitive way every time I'm making a layout decision for different screens.

Re: * { box-sizing: border-box } FTW

#89
post #41

Where the traditional box model starts to make sense is with fixed-size elements, such as images. Adding padding to an element shouldn't alter the dimensions of the contents within the element.

Yes it should. If you don't want that space to be from within the element, then you should be setting a margin, not a padding. Box analogy: when you add foam padding to a box to protect its content, are you effectively widening the box or reducing the volume it can fit?

Using your analogy, if I have to transport an item, and I want to pad it sufficiently, I should be looking for a bigger box. Not trying to shrink the item.

Re: * { box-sizing: border-box } FTW

#90

Paul is there an answer to this: http://stackoverflow.com/questions/8421533/how-to-obtain-ctr... You'll know, so I am asking it here. Or is it even a right question in the first place?

Answered you on SO. :)

Thanks a lot Paul.

I have learned a lot from your work on Boiler Plate, HTML5 and Modernizr. Let me dig deep into zooming and come up with its results.

Post reply on HN