FAQ: Changing the Box Model - Box Model: Content-Box

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

Is the margin initialized to 0 in the default box content?

I’m not really sure about this. In the diagram, Shouldn’t left and right border be included in length of actual rendered width?
I’m talking about the line that indicate length of actual rendered width.

What are the margin values of the content-box?

1 Like

Shouldn’t the actual rendered width in the example be 240 px. Currently:

width = 198 px
left and right padding = 20px
left and right border = 1px

If the actual rendered with is the sum of the padding, border and actual width, does that not mean the actual rendered width is 240 px rather than 200 px as shown in the example?

You have to look really closely to see the width is 158, not 198.
1 + 20 + 158 + 20 + 1 = 200.

Why is only the left and right padding accounted for?
What about top and bottom?

Wait, aren’t margins included in “actual rendered width”? :thinking:

Top and bottom padding account for the height of the element box, and not the width

This is a very poorly worded section to be honest.

There is zero explanation around this: The default value of this property is content-box . *This is the same box model that is affected by border thickness and padding."

Like what does that even mean, “affected by border thickness/padding”