Setting margin not working with in-line property?

Question

I'm trying to follow along with the video in the front-end web development track about block/inline/etc. elements. I'm wondering why when I enter the inline-block value for list (li) elements, the top and bottom margins don't change to 80px for me like they do in the video...any ideas?

Here's the CSS:

body { color: #878787; margin: 0; font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; }

h1 {
font-size: 5.625rem; /* 90px/16px */ color: rgba(255, 255, 255, 1); text-transform: uppercase; font-weight: normal; line-height: 1.3; }

h2 { font-size: 3.3125em; /* 53px/16px / font-weight: normal; line-height: 1.1; margin: 0 0 .5em; / 0 0 26px */ }

h3 { font-size: 1.25em; /* 20px/16px / color: #48525c; line-height: 1.2; margin-bottom: 1.7em; / 34px */ }

li { display: inline-block; padding: 0 12px; border-right: solid 1px; margin: 80 px 0; }

/* Pseudo-classes ------------------ */

a:link { color: rgb(255, 169, 73); text-decoration: none; background-color: tomato; }

a:visited { color: lightblue; }

a:hover { color: rgba(255, 169, 73, .4); }

a:active { color: lightcoral; }

/* Main Styles --------------------- */

.main-header { background-color: #ffa949; }

.title { color: white; font-size: 1.625rem; /* 26px/16px */ }

.intro { font-size: 1.25em; /* 20px/16px */ line-height: 1.6;
}

.primary-content, .main-header, .main-footer { text-align: center; }

.primary-content { padding-top: 25px; padding-bottom: 95px; }

.secondary-content { padding-top: 80px; padding-bottom: 70px; border-bottom: 2px solid #dfe2e6; }

.main-footer { padding-top: 60px; padding-bottom: 60px; border-bottom: 10px solid #ffa949; }

.t-border { border-top: 2px solid #dfe2e6; }

/* Layout Styles ------------------ */

.primary-content, .secondary-content { width: 60%; margin: auto; }

.wildlife { color: white; background-color: #434a52; padding: 18% 24%; border-top: 10px solid #ffa949; margin: 105px 0 60px;

}

And here's the html:

<!DOCTYPE html> <html> <head> <title>Lake Tahoe</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header id="top" class="main-header"> <span class="title">Journey Through the Sierra Nevada Mountains</span> <h1>Lake Tahoe, California</h1> </header> <div class="primary-content t-border"> <p class="intro"> Lake Tahoe is one of the most breathtaking attractions located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation. </p> <a href="#more">Find out more</a>

  <div class="wildlife">
    <h2>Check out all the Wildlife</h2>
    <p>
      As spawning season approaches, the fish acquire a humpback and protuberant jaw. After spawning, they die and their carcasses provide a feast for gatherings of <a href="#mink">mink</a>, <a href="#bears">bears</a>, and <a href="#eagles">bald eagles</a>.
    </p>
  </div>

        <a href="#wildlife">See the Wildlife</a>
    </div><!-- End .primary-content -->

    <div class="secondary-content t-border"> 
  <div>
    <h3>From Tents to Resorts</h3>
    <p>
      Lake Tahoe is full of wonderful places to stay. You have the ability to sleep in the outdoors in a tent, or relax like a king at a five star resort. Here are our top three resorts:
    </p>
    <ul>
      <li><a href="#hotels">Lake Tahoe Resort Hotel</a></li>
      <li><a href="#resorts">South Lake Tahoe Resorts</a></li>
      <li><a href="#lodging">Tahoe Ski Resort Lodging</a></li>
    </ul>       
  </div>
  <div>
    <h3>Pack Accordingly</h3>
    <p>
      One of most important things when it comes to traveling through the great outdoors is packing accordingly. Here are a few tips:
    </p>
    <ol>
      <li>Bring layers of clothing</li>
      <li>Pack sunscreen</li>
      <li>Carry extra water just in case</li>
      <li>Pack light</li>
    </ol>
  </div>
    </div><!-- End .secondary-content -->

    <footer class="main-footer">
        <p>All rights reserved to the state of <a href="#">California</a>.</p>
        <a href="#top">Back to top &raquo;</a>
    </footer>

</body> </html>

Answer 1 · 2017-07-29T22:16:46Z

July 29, 2017 10:16pm

Hi Stephanie,

You'll be annoyed to discover that you just have a small typo in your CSS: you have a space between '80' and 'px', so your rule is being ignored. Changing it fixes the problem, as you can see here.

https://codepen.io/icevans/pen/MvKpzr

Ian

Welcome to the Treehouse Community

Looking to learn something new?

Stephanie Oakes

Stephanie Oakes

Setting margin not working with in-line property?

1 Answer

Ian Evans

Ian Evans

Stephanie Oakes

Stephanie Oakes