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 Basics (2014) The Box Model Margins

Amandeep Pasricha
Amandeep Pasricha
14,932 Points
Posted by Amandeep Pasricha
Amandeep Pasricha
14,932 Points

Can an element a be a content area for a box, as well as a box itself?

Hi, I just wanted to confirm my understanding

Is it true that while h2 and h3 are separate boxes on their own because they were wrapped inside the <div> element, they became the content area for the <div> box as well?

Thanks

2 Answers

Hakim Rachidi
Hakim Rachidi
38,489 Points
Hakim Rachidi
Hakim Rachidi
38,489 Points

The content area is the inner width by inner height of an element.

.box {
  box-sizing: content-box:
  width: 100px;
  height: 100px;
  padding: 20px;
  border: 5px dash blue;
}

The element with the class .box would have a content area of 100px by 100px. This picture visualizes the concept. So yes it should be the case.

Amandeep Pasricha
Amandeep Pasricha
14,932 Points
Amandeep Pasricha
Amandeep Pasricha
14,932 Points

Hakim Rachidi Okay, so is the element's width and height defined originally by the width and height of the content it holds?

Hakim Rachidi
Hakim Rachidi
38,489 Points

If not explicitly defined like in the above example, yes. The browser and many other markup based graphic frameworks, like WPF for windows apps, go down the markup tree, in the case of the web your html, try to get the space each child needs and then adapt the parents size accordingly.

Amandeep Pasricha
Amandeep Pasricha
14,932 Points
Amandeep Pasricha
Amandeep Pasricha
14,932 Points

Hakim Rachidi

Hmm okay. So would you say that all elements are originally just their content box, except once padding and margin are applied to them? Do ALL elements (including inline and block) in HTML come with padding and margin by default?

Hakim Rachidi
Hakim Rachidi
38,489 Points

Do ALL elements (including inline and block) in HTML come with padding and margin by default?

That depends on your user agents style sheet, which you can override with a css reset.

Hmm okay. So would you say that all elements are originally just their content box, except once padding and margin are applied to them?

If box-sizing is set to content-box, that is correct.