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

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

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

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