FAQ: Changing the Box Model - Box Model: Border-Box

This community-built FAQ covers the “Box Model: Border-Box” 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 Box Model: Border-Box

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!

Why change the old box model, with the border-box? I mean in what example this would be useful?

2 Likes

I had a similar question, I’m confused how this differs from the original box model we learned. Is it just for simplicity?

1 Like

Similar question: what’s the advantage of using the old box model?

I just started this section, but from what I understand the old box model if an element is declared width of 200px with a padding of 20px and a border of 1px, the total width of the p1 box becomes 242px.

If you change the box-sizing to border-box, and the width is defined as 200px with the same values for padding and border, as mentioned above, the box size would remain at 200px. That means the content size decreases in order to maintain overall box width to 200px.

I think it’s useful, considering you are able to work with whole clear numbers, instead of having to fiddle around with something that is 242px wide compared to 200px wide.

I could be wrong, if I am i’d love to know that I am. From reading and looking at the diagram for border-box box model, that was the conclusion I came to.

Put this code into Visual Studio Code or the Code Academy interface:

<style>

    .earth {
       border: 5px solid black;
       height: 200px;
       width: 300px;
       padding: 20px;
    }
    
    
    .mars {
       border: 5px solid black;
       height: 200px;
       width: 300px;
       padding: 20px;
       box-sizing: border-box  
    }
    
</style>
    
    <h1 class="earth">Hello Earth!</h1>
    
    <h1 class="mars">Hello Mars!</h1>

Play around with the padding and border size in the .earth class, observe how the box gets bigger.

Then, fiddle with the padding and border size in the .mars class, observe how the box does not get bigger.

Do you see how this might be useful?

p.s. This code should all go into an HTML file.