FAQ: The Box Model - Review


#1

This community-built FAQ covers the “Review” exercise from the lesson “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

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

overflow: scroll; creates two scroll bars in my browser, even if only (for example) the vertical one is needed. It’s not ideal aesthetically. How do I create only a vertical scroll bar?


#3

Yes, but there is also a way to create only the scrollbar needed, when and if needed.

overflow: auto;

#4

In the text for this exercise, in number 9 it gives possible values for the overflow property of display, hide and scroll. Shouldn’t this be visible, hidden and scroll?

I thought maybe they were alternatives, but https://developer.mozilla.org/en-US/docs/Web/CSS/overflow doesn’t mention display or hide.

I also tried using overflow: hide; but it didn’t seem to work - whereas overflow: hidden; did work.


#5

I’ve invited the Community Manager to have a look at this and refer it to the dev team for correction of the narrative.


#6
.share {
  border: 1px solid LightGrey;
  padding: 20px 0px;
  position: relative;
  text-align: center;
  width: 100%;
}

.share a {
  background: red;
  border: 1px solid red;
  border-radius: 3px;
  color: white;
  display: inline-block;
  margin: 10px;
  padding: 15px;
  text-decoration: none;
}

2 questions here:

  1. Under .share, padding is set to 0px at the sides but the borders of my light grey box go all the way to the ends of the browser. From my understanding, wouldn’t 0 padding at the sides lead to the grey box ending right where the red buttons are?

  2. Again under .share, does position: relative serve to create a “base” for the buttons in .share a? So the margin of 10px is for the buttons in relation to the grey box?


#7

Not a response, but a question… Where is the width and height inherited from?

The best element to have that property assigned is the parent. All you’re trying to do is break out of the inherited default static property of the body. The children will be relative to the parent, not the document.body.