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

Posted by chazel
chazel
Courses Plus Student 6,961 Points

Why is the gap removed for only *some* list items?

While putting together a test page for this, I noticed that some list items had more spacing between them. Specifically, the spacing following "Boromir" and "Éomer" have more spacing, and this can be seen easily by looking at the two offset solutions sections. What is causing this behavior specifically (i.e., why is it only happening to these two)? The ul (0rem) li (1rem) and unreadable markup solutions work, but the negative margin solution does not.

Screen Shot

screenshot

Source Code

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inline Block Spacing</title>
  <meta name="description" content="Inline Block Spacing solutions">

  <!--<link rel="stylesheet" href="css/styles.css?v=1.0">-->
  <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
  <![endif]-->
  <style>
    /* normalize */
    ol, ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    /* page styles */
    body {
      font-family: Arial, Helvetica, sans-serif;
      padding: 2rem;
    }

    h1 {
      margin-top: 0;
    }

    h2 {
      margin-bottom: 0.25rem;
    }
    /* menu styles */

    .menu-container {
      width: 100%;
      box-sizing: border-box; /* fixes right flow flush to edge with 100% width */
      background-color: #303030;
      color: white;
      padding: 1rem 1.25rem;
    }

    .menu li {
      display: block;
      border: 1px solid #cccccc;
      padding-left: 0.5rem;
      padding-right: 0.5rem;
      line-height: 1.5rem;
    }

    @media (min-width: 769px) {

      .menu li {
        display: inline-block;
      }

      .menu-with-margin-px-offset li {
        margin-right: -4px;
      }

      .menu-with-margin-rem-offset li {
        margin-right: -0.25rem;
      }

      .menu-with-font-size-fix ul {
        font-size: 0rem;
      }

      .menu-with-font-size-fix li {
        font-size: 1rem;
      }

    }

  </style>
</head>

<body>
  <h1>Inline Block Element Spacing Solutions</h1>

  <h2>Menu with Default Space - The Gap</h2>
  <div class="menu-container">
    <ul class="menu">
      <li>Aragorn</li>
      <li>Boromir</li>
      <li>Celeborn</li>
      <li>Dernhelm</li>
      <li>Éomer</li>
      <li>Faramir</li>
      <li>Gandalf</li>
    </ul>
  </div>

  <h2>Menu with Gap Removed through Markup Line Break Changes</h2>
  <div class="menu-container">
    <ul class="menu">
      <li>Aragorn</li><li>
      Boromir</li><li>
      Celeborn</li><li>
      Dernhelm</li><li>
      Éomer</li><li>
      Faramir</li><li>
      Gandalf</li>
    </ul>
  </div>

  <h2>Menuwith Gap Removed through Markup List Item Close Tag Removal</h2>
  <div class="menu-container">
    <ul class="menu">
      <li>Aragorn
      <li>Boromir
      <li>Celeborn
      <li>Dernhelm
      <li>Éomer
      <li>Faramir
      <li>Gandalf
    </ul>
  </div>

  <h2>Menu with Margin Offset - margin-right: -4px</h2>
  <div class="menu-container">
    <ul class="menu menu-with-margin-px-offset">
      <li>Aragorn</li>
      <li>Boromir</li>
      <li>Celeborn</li>
      <li>Dernhelm</li>
      <li>Éomer</li>
      <li>Faramir</li>
      <li>Gandalf</li>
    </ul>
  </div>

  <h2>Menu with Margin Offset - margin-right: -0.25rem</h2>
  <div class="menu-container">
    <ul class="menu menu-with-margin-rem-offset">
      <li>Aragorn</li>
      <li>Boromir</li>
      <li>Celeborn</li>
      <li>Dernhelm</li>
      <li>Éomer</li>
      <li>Faramir</li>
      <li>Gandalf</li>
    </ul>
  </div>

  <h2>Menu with Font Size Fixes for ul (0rem) and li (1rem)</h2>
  <div class="menu-container menu-with-font-size-fix">
    <ul class="menu">
      <li>Aragorn</li>
      <li>Boromir</li>
      <li>Celeborn</li>
      <li>Dernhelm</li>
      <li>Éomer</li>
      <li>Faramir</li>
      <li>Gandalf</li>
    </ul>
  </div>

  <!--<script src="js/scripts.js"></script>-->
</body>
</html>

2 Answers

Victoria Retallick
Victoria Retallick
11,127 Points
Victoria Retallick
Victoria Retallick
11,127 Points

In some of your code there is whitespace after the opening <li> however that does not seem to be what you are referring to? How do you mean the negative solutions do not work?

chazel
chazel
Courses Plus Student 6,961 Points

Hi Victoria,

Thanks. I added a screenshot and clarified my question in the original post. There is a gap between two list items, so a negative margin solution is not being applied consistently. And I am curious about why that is the case.

Victoria Retallick
Victoria Retallick
11,127 Points
Victoria Retallick
Victoria Retallick
11,127 Points

I think I know what you mean now.

I believe you can fix it by using these values instead

.menu-with-margin-px-offset li {
        margin-right: -4.5px;
}

.menu-with-margin-rem-offset li {
        margin-right: -0.28125rem;
}