CSS CSS Basics The Box Model Margins

Amandeep Pasricha
Amandeep Pasricha
14,929 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

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,929 Points

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

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,929 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?

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.