FAQ: Changing the Box Model - The New Box Model

Off Topic

How many developers even know what their site looks like when the client has styles and behaviors disabled?

How many courses are so bent on the outcome they forget to delve into the beginnings? HTML is a huge mouthful to take in one gulp, yet no courses are dedicated to just HTML. That’s why so few learners are unawares when it comes to default behavior. We’re so biased to what it looks like we miss how it is structured at the document level.

If we started at the very basic markup built from an outline purely to render the textual content and images we would see little structure is actually needed. If every layout effect requires more structure, our content gets buried in markup and nested levels to the nth degree that in the end only burden the client. Every HTML element has to be sourced in the namespace for specs to follow. More elements means more specing. Sure, it’s fast on today’s platforms but that is no reason to be inconsiderate toward the benefits of less structure.

Less structure in turn means less effects possible, to some degree. We would have to prove the extra structure was/is actually necessary. Building from the ground without adding structure is how we hit the roadblocks, in the first place. One should always travel down this path, first, before tossing in library solutions.

That brings us to discovering native behaviors that we may be wont to circumvent. Blanket solutions, such as reset.css take the universal approach one so avoids. We never get to see the native behavior if we never let ourselves encounter and study it.

To really learn HTML, one needs to spend a month with the W3C HTML Elements page open the whole time while they explore the default behavior of every element in the current recommendation. Do this and become an expert, overnight, thereafter.

I could use some help with this please:

So if I used a border-box model to style my page → assigned a width and height to my h1 element. Then added padding and borders to it - wouldn’t that affect the font size of the h1 element if there is any assigned?

Maybe I’m conceptualising this all wrong but from how I understand the border-box model basically auto-sizes the content to accommodate padding and borders within the specified width and height. What happens if a font size is also defined?

Thank you!

box-sizing - CSS: Cascading Style Sheets | MDN

The only effect that font-size will have is on height not width. The box will stretch vertically if the font is larger than the height.

Thank you :slight_smile: so for example, if an element has height 10px, font size 8px and padding of 1px on top and bottom - it’s perfect fit. But what if I increase the font size to 9px? Will the text appear outside the boundaries of the element?

Would I then have to add an overflow: scroll or something similar?

If the font size is increased, the height of the box should also increase so as to fit the text. Give us a while to set up a test example. Dashing out, just now, but will get to it, presently.


It appears you are correct that the text will overflow the container. I was wrong that the box would stretch; it doesn’t. However, there is a workaround for this to guarantee that it does stretch… use EM as the unit of height. We can still use PX for the font size.

1 Like

Thank you for raising this! I was wondering the same thing - has anyone found a good answer?

You are actually right, some of this websites for learning web development don’t really have the important topics/fundamentals a beginner is supposed to know. Thanks for sharing this update.

1 Like

I was working on The New Box Model lesson, where we need to input the following:

* {
  box-sizing: border-box;

I checked the solution and the answer is exactly the same as what I put in. Is this a bug?

I had the same issue! Following for an answer.