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

How?

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

"If we remove the main-nav class selector in the media querry from this rule, we can see how main-nav is back to being a block level element, so it drops down to the next line. Now to center align these elements in the header, add a text-align property and set the value to center. This will center align the content inside of main header."

.main-header {
    text-align: center;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    background: #3acec2;
    margin-bottom: 30px;
}

Ok wait, how has the main-nav gone back to being a block level element, when once we removed the .main-nav class elector, as he assigned, there is still a .main-nav li selector there, so shouldn't we remove that as well? But even though we didn't, it was still able to become a block level element. How?

1 Answer

Nick Trabue
PRO
Nick Trabue
Pro Student 12,653 Points

Each element has it's own properties. Parent elements have properties. Children elements have properties. You can set a child's properties to be different than it's parents. <div> and <ul> by default is a block level element. For a full list check this mdn page https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

<ul class="main-nav"> <!--- block element by default will occupy it's own line -->
     <li>thing</li> <!--Block element by default -->
     <li>thing 2</li> <!-- Block element by default -->
     <li>Thing 3</li> <!-- Block element by default -->
</ul>
</div>
<img class="logo"> <!---Inline-Block element by default
  .name,
  .main-nav, /*Don't forget the comma here. This makes .main nav now inline with the logo at higher resolutions*/
  .main-nav li {
    display: inline-block;
  }
/*note that ".main-nav li" is only targeting the list items in .main-nav It's not targeting .main-nav itself. */
  .name,
  .main-nav li {
    display: inline-block;
  }
/*Now .main-nav will be on it's own line. The list items will be inline. */

Hopefully that helps?