FAQ: Changing the Box Model - Review: Changing the Box Model

This community-built FAQ covers the “Review: Changing the Box Model” exercise from the lesson “Changing the Box Model”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn CSS

FAQs on the exercise Review: Changing the Box Model

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

Is it only the universal selector that the border-box can be applied to?

That box-sizing value can be applied to any element to which a border can be applied. That means all block level elements.

What’s more, it is not very judicious to use the universal selector at all given the amount of resources expended. It selects everything in the HTMLElement group and writes the rule for each node type, regardless whether it exists in the document or not. Better to write selector rules for elements that actually exist. The universal selector is not a silver bullet, but an expensive hotel bill.

* {
  box-sizing: border-box;

IMHO, this is so not right, but there would not be this selector if there wasn’t a valid use for it. Let your studies reveal it, and learn to use it wisely, or never.


So if the border-box allows borders and padding to leave the box dimensions unaffected, which part of the box gives it this space? Is it the box-content that becomes smaller?

1 Like

To clarify with an example:
A border box with the dimensions 200px by 300px has a 3px border and a 10px padding. Does the box-content become 26px smaller?

Yes. It has to shrink so the box does not change size.

1 Like

what other values can




Is it a good practice to always set the Box Model this way or just in especific situations?

1 Like

How we set the box model is a choice, not a best practice. Only the developer can make that choice. There is no rule, as it were.

1 Like

Hi Roy,
I just wanted to clarify to make sure I understand what you’re saying.

Are you saying that we should try to avoid using

  • {} ?

(Actually I’m trying to insert an asterisk there but I don’t know why it keeps turning into a bullet)

Does it mean to say we should simply declare the box sizing whenever we set the rules for any aspect of the box ? e.g.

p {
box sizing: border-box;
padding: 20px;


It’s my way of thinking, yes. The universal selector is a resource hog. Even with vastly improved computer speed and memory, resources are resources. We should endeavor to conserve at every turn.

Ok got it! Thanks so much!

1 Like

Hey Roy @mtf and everyone,

I was wondering, in terms of economizing code, in this case adding a border-box, would you agree (recommend, abhor, etc) to use a class=“border-box” for example and apply at my own discretion.
I get that its up to each coder, however it seems like you have seen a lot code, so I was wondering if this would be an acceptable attempt on your opinion. I’m trying to not be too wild at first, cuz I know I want to work with other people as I advance in this.

Thanks a lot!

We see a universal rule often applied to such properties as ‘border-box’, but for my own part I don’t use universal rules, as a rule. Consider which elements the property will apply to and write a selector rule that selects those elements.

1 Like

The lesson keeps saying that the box-sizing property controls what type of box model the browser uses to render our web page. Would it be more correct to say that the box-sizing property controls the type of box model of an element?

It would depend where it is declared, in a sense. The property may be inherited so applying it to the outer wrapper would have it apply throughout. If we only declare it on a particular element, then yes, that is all it would affect.

We need an experiment to test and make determinations as to inheritance. Have you set up on REPL.IT, yet? I find that a good sandbox for our purposes.

1 Like

It appears there is no inheritance of the box-sizing property, but it can be inherited if we declare it.

The box-sizing property has five possible values:

  • border-box
  • content-box
  • inherit
  • initial
  • unset

I’m sure this will be well described in the docs. The inherit option is there which means if all our container classes have that value given to their box-sizing property, the entire page would be on one box model.


Some might think that the expedient thing to do is use a universal selector to apply this property, but I disagree. To my mind that selector writes so much superfluous data onto every DOM node, then has to scan it over and over again on every redraw, it is a resource hog in the least. The universal selector may seem like a silver bullet but it is actually an albatross. Select the container classes that the rule must apply to, and be done with it.

1 Like

Yes, I test most of my code on REPL.IT. My question though was asking about the terminology itself. Which description of the box-sizing property is more correct:

  1. The box-sizing property controls the type of box model the browser uses to render our web page
  2. The box-sizing property controls what type of box model an element (or elements depending on the selector) has

Can you show me an example?