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

Frequently Asked Questions CSS FAQ
1

Community%20FAQs%20on%20Codecademy%20Exercises
Community%20FAQs%20on%20Codecademy%20Exercises1000×208 141 KB

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!

2

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

4 Likes
3

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

3 Likes
4

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

2 Likes
5

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.

4 Likes
6

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.

3 Likes
7

Is margin used with Box Model: Border-Box? If so, is it configured outside of the border/specified width as with the Content-Box, and is it collapsing?

8

Border-box should set the Width an Height for all the Html elements to fixed , but when writing something like this code below where the padding exceeds a certain value (in this case it starts from 100px) it starts to modify the real width and height of the elements.

* {
   box-sizing: border-box;
}

h1 {
   border: 3px solid black;
   height: 200px;
   width: 300px;
   padding: 300px;       <--- 
}

How is that possible ??

9

Why wasn’t the old box model made like the border-box example from the beginning? If it is more useful, why is in it updated?

10

Here’s a video that explains it better: https://www.youtube.com/watch?v=WlGQdgy-M6w

2 Likes
11

Thanks! I really enjoyed tinkering with these values!

12

Welcome to the forums @drodas6232! Thanks for the video, I found it really helpful!

13

" The code in the example above resets the box model to border-box for all HTML elements. This new box model avoids the dimensional issues that exist in the former box model you learned about.

In this box model, the height and width of the box will remain fixed. The border thickness and padding will be included inside of the box, which means the overall dimensions of the box do not change."

I thought the height and width were fixed in the default box-model, and that the border thickenss and padding being included inside of the box, was also part of the defaul box-model.
Essentially, I do not understand the difference between the content-box and border-box, and I would highly appreciate assistance with this.

14

This helped a ton. Thanks a million

15

@mtf How do I apply box-sizing: border-box without having to use the universal selector? I like the idea of not having to load all HTMLElements in memory

16

One way is to select all the container elements you wish to apply the rule to, assuming your layout is not too complex. The memory issue referred to earlier is apparently less of a concern with today’s modern browsers so we needn’t panic about using the universal selector. Suggest read up on pros and cons to see if there are still any provisos.

17

Does margin have any applicability in the Border-Box model?

18

Yes. Margin will always have an effect. It is a built in component of the box model.

19

In the example the height is set at 200px and the width is set at 300px. How come the border-box width is set at the height value of 200px and not the width value of 300px?

20

I was also confused but I think you are referring to the instructions and the diagram shown as an example on the right. I believe in this case we need to keep in mind that the theory provided with the code example does not reflect the result with the image shown on the right.