Learn CSS Grid by Building a Magazine - Step 27

HTML-CSS
1

Tell us what’s happening:
What’s the point to add CSS rule “box-sizing: border-box” to html element since the property is not inherited?
Shouldn’t it be placed within “*, ::before, ::after {}”?

Your code so far

*, ::before, ::after {
  padding: 0;
  margin: 0;
}

html {
  font-size: 62.5%;
  box-sizing: border-box ??? Why here ???;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

Challenge: Learn CSS Grid by Building a Magazine - Step 27

Link to the challenge:

2

You have a point here. Every CSS reset style sheet I have seen applies it to *, *::before, *::after (or something very similar). I think it’s basically considered a best practice now to always do this. But ya, applying it just to html is not going to have the intended effect because it is not inherited.

Testing the final product by removing box-sizing from html doesn’t seem to have any effect. So it seems that box-sizing could just be removed completely.

3

The reason for adding box-sizing: border-box to the html element is to ensure that the box model calculation for all elements on the page will include the border and padding in the width and height of an element, instead of just the content. This can simplify layout and prevent unexpected behavior in some cases.

The box-sizing property is not inherited, but it’s common to set it on the html element because it applies to all elements on the page, effectively making it a global default. However, you can add box-sizing: border-box to *, ::before, ::after {} to make the property inherit to all elements on the page, not just the ones that have explicitly set styles.

4

@Nathan.clark88, since the box-sizing property is not inherited, setting it only on html will not make it a global default. But what you can do is the following:

html {
  box-sizing: border-box;
}
* {
  box-sizing: inherit;
}

I’ve seen this pattern in the wild. I think it allows custom components to easily override the box-sizing property if needed but still sets it as a default for all other elements.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.