Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Basics (2014) Basic Layout Width and Height Properties

Loris Guerra
Loris Guerra
17,536 Points

Width property

At 05:30 on this video, the instructor set the "width" of the <div> element to 960px. After that, he also adds 50px + 50px of "padding" on the left and right of the <div>. When he finally inspect the element inside the chrome dev tools, the total width will be 1060px, that are 960px + 50px + 50px.

I tried to do the same on my own, setting on a green <div> the "width" to 240 px and adding some padding and some border on the left and right. BUT the total width now doesn't increase! Instead "padding" and "border" will DECREASE THE SIZE OF THE CONTENT-AREA from 240px to 200px

Why does it happen?

I made a screenshot for better showing the issue.

alt text

2 Answers

If you look further in the inspector you can see box-sizing: inherit; the inheritance model is providing the value of box-model and that is why you are seeing your content getting smaller. Based on the documentation:

border-box

The width and height properties include the content, the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is in Quirks mode. Note that padding and border will be inside of the box e.g. .box {width: 350px; border: 10px solid black;} leads to a box rendered in the browser of width: 350px. The content box can't be negative and is floored to 0, making it impossible to use border-box to make the element disappear. Here the dimension is calculated as, width = border + padding + width of the content, and height = border + padding + height of the content.

More info:

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

You may have missed where the instructor talks about this property. If you want the exact same behavior as the one in the video change the border-box property to "content-box".

Loris Guerra
Loris Guerra
17,536 Points

Thank you Helmut! I didn't know about this "border-box" property. The mistake happened because I imported "Semantic UI" inside this HTML file, and it turned on the "border-box". My fault, sorry about that! Thanks again!