Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
saber
13,276 PointsBox-sizing still best practice?
Is the box-sizing property still best practice these days? I can understand if you're developing websites with fixed pixel widths... but I thought it was better to define widths in terms of ems so that everything adjusts to the screen for a more seamless viewing experience across devices.
Are their certain applications where defining things in terms of pixels still makes sense?
2 Answers
rydavim
18,813 PointsThe box-sizing property is not something exclusive to px units. Box sizing is just defining how to want your dimension styles to work with the box model.
By default, you're setting the width of the content only. So if you had one div at 40% and another at 60% they would not be able to be side by side if they had padding or borders, because those are being added onto the content width you set. The border-box style forces the padding and border widths into the total width.
Personally, I like using the following rule. This makes it so the dimensions of everything I style includes the content, padding, and borders. This means simpler calculations and a lot less math.
* { box-sizing: border-box; }
EDIT : As to when px units are useful, I would agree that rem, em, and percentage units seem like the better choice most of the time. However, I can think of at least one example where I consistently prefer px units: border-radius. I would guess that someone with more practical experience might have other examples as well.
Guil Hernandez
Treehouse TeacherHi Brock Keasler,
Check out this post I wrote on box-sizing. It may clear up some misconceptions about box-sizing & the CSS box model. :)
saber
13,276 PointsGuil Hernandez - Great blog post. I think I understand the basic idea behind box-sizing. I guess what I'd really like to see is an example where the widths are defined in terms of ems(with maybe the exception of borders as noted by the previous comment). I was worried at first that box-sizing was limited strictly to designs defining widths in terms of pixels.
Guil Hernandez
Treehouse TeacherYep, box-sizing works the same way with em, rem, %, px, etc.
saber
13,276 PointsGuil Hernandez - Thanks for clearing that up!
Ayman Abdoun
10,342 PointsYou are amazing teacher.