Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Layout Basics Controlling Layout with CSS Display Modes Using Inline-Block to Set Width, Height, Top and Bottom Margin and Padding

Luqman Shah
Luqman Shah
3,016 Points
Posted by Luqman Shah
Luqman Shah
3,016 Points

Confused by how these padding values work

Media queries:

  .name,
  .main-nav,
  .main-nav li {
    display: inline-block;
  }

  .name,
  .main-nav li {
    display: inline-block;
  }

Why do the main-nav elements take up more padding real-estate than the desired padding of 10px and 15px set in the base layout styles, when removing main-nav class from the media queries:

The desired padding values were set in the base layout styles:

.name a,
.main-nav a {
  padding: 10px 15px;
  display: block;
}

1 Answer

Makenna Smutz
Makenna Smutz
5,444 Points
Makenna Smutz
Makenna Smutz
5,444 Points

Hey Lukman!

Its because by default it will add the padding. Add the CSS box-sizing: border-box;

Hope this helps!

Luqman Shah
Luqman Shah
3,016 Points
Luqman Shah
Luqman Shah
3,016 Points

Ahh never mind I get it, this helped a lot, and taking the code challenge refreshed my memory and understanding of this. Thanks Mekenna!