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

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

James Estrada
seal-mask
.a{fill-rule:evenodd;}techdegree
James Estrada
Full Stack JavaScript Techdegree Student 25,866 Points
Posted by James Estrada
.a{fill-rule:evenodd;}techdegree
James Estrada
Full Stack JavaScript Techdegree Student 25,866 Points

What's Included in the Box?

Guil Hernandez mentions: "Keep in mind that when a width or height is defined on a element, we're not exactly defining the entire area of the box, meaning the content, padding and borders. We're actually just defining the width for the content area itself".

What about margins? Aren't they included in the area of the box?

1 Answer

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

No, margins are never included in box dimensions. However, padding and borders might be.

There's a setting called "box-sizing" that allows you to change the box model a bit. By default, it is "content-box", which is the situation described above where the dimensions include only the content area.

But you can set it to "border-box", and then the dimensions will include content, padding, and borders.

But, alas, there is no "margin-box" setting.