FAQ: The Box Model - Review

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 “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 Likes
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.

1 Like
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.

2 Likes
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.

8

When the CSS cheat sheet will be available :((( ?

1 Like
9

That’s the same question I had a couple of days ago! Thank you for asking.

10

In this exercise, we can see that there is some space between the <div> with a class of share and the <body>. However, I assumed it was simply margin, but when I checked, the <div> had no margin. What is that space then?

image

Note: I changed the background color of the <body> to make it clearer where the space is

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

The margins are on the anchor elements which are inline-block.

12

This exercise says " * The overflow property can be set to display , hide , or scroll , and dictates how HTML will render content that overflows its parent’s content area."

however, the overflow have property as hidden, visble and scroll. or it can be visble. hide and scroll?

13

display is not a valid value, so the narrative is incorrect if it explicitly states that as a value.

overflow - CSS: Cascading Style Sheets | MDN

We can only use one of the values, so I’m not sure I understand your question.

1 Like
14

query cleared. Thanks to the link.

1 Like
15

How do I adjust vertical position of elements inside the box model?
After I’ve tried changing the height of share elements at the bottom of page the text inside has become misaligned relatively to the background. I was able to fix it’s position manually by using line-height property. Tried setting a vertical-align: middle; declaration to .share a but it doesn’t work for some reason. Surely there’s a way to make text stay in the middle regardless of other properties.

2021-09-15 23_14_29-Window

16

Be sure there is no padding in the buttons. Set the height and width, and give line-height the same value as height.

button {
  padding: 0;
  width: 6em;
  height: 2em;
  line-height: 2em;
}

The button will be sized relative to the font.

1 Like
17

It does work, thanks!
What if I want buttons to have a specific height instead of scaling to the font size?

1 Like
18

That would be okay since modern browsers scale everything, unlike in the old days when px was fixed and did not scale. In light of scaling, it is arbitrary to use px. My old school thinking still prefers proportional relationship over fixed (purportedly) size.

The key is to get vertical centering without using padding since it has an effect on the box size. Line-height is preserved when wrapping, so be careful how much text you apply it to and be sure it scales correctly for all practical purposes.

1 Like
19

" The height and width of a content area can be set in pixels or percentages."*
When to use percentage and why ?

Thanks in advance.

20

When we wish to make things proportional in all device widths, would be one. Pixels widths do not change when the browser window is widened or narrowed. Percentages allow regions to grow and shrink in proportion to one another. It makes the page more adaptable.

2 Likes