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!

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

CSS CSS Foundations The Box Model Width, Height and Overflow Properties

Posted by Phuc Tran
Phuc Tran
6,542 Points

Content box model not working

/* Complete the challenge by writing CSS below */ a { display: inline-block; width: 100px; }

main {

box-sizing: padding-box;
-moz-box-sizing: padding-box;

}

//Instruction Add a property that forces the padding into the width of the div. Cheers and thanks!

3 Answers

Kevin Kenger
Kevin Kenger
32,834 Points
Kevin Kenger
Kevin Kenger
32,834 Points

My theory is that when this code challenge was made, padding-box wasn't a property value. A while ago, the only four values available were content-box, border-box, initial, and inherit. The padding-box value was the newest addition, and is currently only supported in Firefox (from my understanding).

Kevin Kenger
Kevin Kenger
32,834 Points
Kevin Kenger
Kevin Kenger
32,834 Points

Hey Phuc,

In order to force the padding and/or border into the width of an element you just need to use the border-box value.

box-sizing: border-box;
Phuc Tran
Phuc Tran
6,542 Points
Phuc Tran
Phuc Tran
6,542 Points

Thanks. It worked. However, in this case there was no border so adding padding + border = adding padding only into the width of an element. Should box-sizing: padding-box; work more accurately in this case?

   // The width and height properties include the padding size, and do not include the border or margin.```