FAQ: The Box Model - Height and Width

[wiki-bot]

This community-built FAQ covers the “Height and Width” 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 Height and Width

• Why some elements don’t have height and width?

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply () below!

Agree with a comment or answer? 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!

[peterjameslewis]

on this task of “Height and Width” it asks you to add height: 700px; into CSS however I am confused why it changes the size of the image rather than the text inside the

tag??

[saalr]

because the banner takes care of the entire space, including the image. if you would want to change the actual text, then you would have to go to #banner .content h1. (because h1 is the text) and change the size there

[mtf]

@saalr

#banner .content h1

That much specificity is not required. Ideally we should work with the least specificity possible so upgrades and mods are simpler. If there is only one H1 in the page, or in the case of there being more than one if you want them all the same size then,

body {
  font-size: 100%;
}
h1 {
  font-size: 1.5rem;
}

The first rule above is to accept the base font size set by the user. Then the H1 is relative to that. A default H1 is 2rem (about 32px).

[saalr]

i get my paragraph aligned to the left when i make it width:30 px;. but when i make it 350 (which is a lot more) i get it normally as a paragraph . how come?

[deryatanriverdi]

on this task of “Height and Width” it asks you to add height: 700px; into CSS however I am confused why it changes the size of the image rather than the text ? I cleared everything in style.css and wrote new codes, and it still didnt change. please help!!!

[evelyn_l]

Again, I can barely read the text on the sample website. The contrast between the text and the background is minimal. If it’s just another website out there, I wouldn’t care and just not go back to that website.

But since this is set as an example for the Codecademy learner, I think the instructor should use user a better example (or just make the text a few shares darker). I am a girl, and I do think it looks pretty and all. But functionality should trump appearance, especially in this case. If I can’t read the text, I won’t care how pretty the site looks.

[mtf]

We do have control over this in the p selector rule. Try, #4d4d4d.

As an aside, the author appears to have used color names that the syntax highlighter does not recognize (but that the browser might).

.byline {
  border-bottom: 1px solid LightGrey;
  border-top: 1px solid LightGrey;
  color: Darkgrey;
  font-size: 14px;
  font-weight: 200;
}

Notice the names are in the same red-orange as the rest of the text. Changing the names as follows,

.byline {
  border-bottom: 1px solid Lightgray;
  border-top: 1px solid Lightgray;
  color: Darkgray;
  font-size: 14px;
  font-weight: 200;
}

and now they are the blue gray we would anticipate.

Darkgray

In place of Darkgray, try #333333.

[evelyn_l]

Awesome! Thank you, Roy! You’re always so responsive and provide great feedback!

[mtf]

You’re welcome; and, thank you!

[courserunner98994]

Just to confirm with this topic, when you set the height or width of an element, you’re setting the element’s CONTENT area, not the total height or width of the element itself ???

[will_hm]

The following code changes the size of the container, but not the content within: (key code marked with asterisks)

#banner {
  background-image: url("https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-6/htmlcss1-img_tahoe.jpeg");
  background-size: cover;
  background-position: bottom center;
  *width: 100%;*
  *height: 700px;*
}

If you wanted to change the dimensions of the content within the container you do this: (key code marked with asterisks)

#banner .content h1 {
  position: relative;
  top: 50px;
  margin: 0 auto;
  *width: 400px;*
}

Now the text has been crammed into a narrower space. Note that the letters themselves did not change size. To effect this, use the property font-size: followed by the value in px, em, rem, etc.

[pysurfer78186]

In the code the width in #banner is set to 100%. What does that mean?

[mtf]

@pysurfer78186

What does that mean?

It means full width of the viewport, or full width of the parent element, which ever case may apply.

.parent {
    width: 400px;
}
.child {
    width: 100%;
}

The child element in this case will also be 400px wide.

[gregbutler1016]

The lesson tells us that if we set the width/height in px, what will fill a laptop screen would overflow a mobile device screen. That leads me to believe that it really isn’t the ideal way to do it. Now that most people do the majority of their web browsing on a mobile device, is there something that allows you to code for all size screens? A one size fits all type?

[pabloramosescalona]

Why when we increase the height seems it’s growing downwards at the bottom of the content?

It does not makes sense based on the diagram because height mark up at top and the bottom of the content: (Why that happens? And how makes sense?)

[shafi.alvi99]

I’m a little confused here, do the Height and Width property define dimensions of the element’s box or the content area?

[mtf]

Content area. According to the box model, border and margin are outside of this region. Padding is, however, inside and will have possibly undesired effects, hence I suggest caution or total avoidance.

[joseulisesjuarezparr]

Hi, is there a way I can center the content of the box that have height and width much larger than content?

Example:

**html:**
<div class="circle">
        <p>CIRCLE</p>
</div>

**css**
.circle {
    background-color: red;
    height: 300px;
    width: 300px;
    border-radius: 50%;
    margin: 50px;
    padding: 60px;
}

This is the result… The text “CIRCLE” are not centered, is there a way I can center the text In the middle?

Thanks

[nad.chel]

Does this really make sense?

  <div id="banner">
    <div class="content">
      <h1>Conservation Efforts at Lake Tahoe Being Praised by Nation's Leaders</h1>
    </div>
  </div>

Why isn’t it

  <div id="banner" class="content">
      <h1>Conservation Efforts at Lake Tahoe Being Praised by Nation's Leaders</h1>
    </div>

? Not to mention using divs instead of semantic elements at all (which is, as I understood, not advisable)