FAQ: Changing the Box Model - The New Box Model

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 “The New 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 The New 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!

2

In what kind of context would it be better to use content-box model rather than a border-box model? If the border-box model makes calculating the layout easier, is there a reason why you wouldn’t always use only that one? Are there disadvantages to the border-box model?

12 Likes
3

where is the proper place to add the universal selector?

1 Like
4

Do you have to declare the new box model at the beginning of your code or can you place in any location? In addition using the * can you set other universal defaults within CSS?

5

Can you please explain how you advance to the next screen in this particular Box Model Exercise. The first Instructions are to experiment changing the Height, Width, Padding, etc. and then the Next button never turns yellow to go to the next screen. How on earth do I advance please?

6

I have no idea what I’m doing wrong with this one. I cant’ see any difference between what I have done and the solution. I just copy and pasted the code from the instructions and it doesn’t work. Is there a glitch in this one?

4 Likes
7

You don’t have to put it in the beginning of your code. For example:

CSS

    .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  
    }

HTML

    
    <h1 class="earth">Hello Earth!</h1>
    
    <h1 class="mars">Hello Mars!</h1>

Throw this into the Code Academy interface, or Visual Studio code, and see what happens.

2 Likes
8

I have no idea what I am doing wrong!!! It’s driving me mad! What should I do please? HELP!

1 Like
9

The universal selector * was used to define the rule for box-sizing. Why not use the body selector?

10

Firstly welcome to the forums system9428163692.

Secondly, I am still very new to this myself, but if I understand this correctly, if we used the body class selector, we would only change the box properties for that one elements box. If we use the universal selector *, we then target all the elements boxes on our page. ie the p element. Happy to be corrected here but that is how I understood it.

11

I’m getting a bug on this one too, doesn’t work when typed in (checked, checked and checked again). Using the view solution button worked, but matched my code exactly. Running Chrome 83.0.4103.116 64-Bit.

2 Likes
12

+1 :raised_hand_with_fingers_splayed: … What would be an example from the real world, where we make use of this and why?

14

What is the main difference between content-box and border-box

15

@mtf
I have this same question. Would need your assistance in understanding this. Why is there is content-box and border-box at all? What are the advantages or disadvantages of using both?

16

The box-sizing CSS property sets how the total width and height of an element is calculated.

One gives our div, et al block elements, the size we specify, plus the border width, the other subtracts border width from the size we specify.

17

the memory game on the right of my screen in the the browser isn’t working. I keep clicking on the tiles but i don’t see any symbol

18

Codeacady should give some example how to use it. I am getting confused.

19

I’m getting an error although my code is the same s codecademy’s. I experience this occassionally with the various exercises. In this case it was:

  • {
    box-sizing: border-box;
    }
    I took a screenshot but I don’t think I can upload it here to show.
    Anyone else getting these errors?

I also wonder when to use box-sizing border-box and when to use content-box.

BR

1 Like
20

Do I need to put box-sizing: border-box for universal CSS rule anytime I start a new project? Or in what situations I need this and what other situations I don’t need this?

21

That will only hide the native behavior from view. Suggest build the layout using no cudgels or magic bullets and observe the default behavior closely. When the layout is flexible and elastic (adaptable) then select the objects that might benefit from that property and apply it there, only, then observe the effect again.

1 Like