Question

I’m running into a weird issue that I’ve never noticed before. I have the following code:

<div class="feedback">
  <span> Was this helpful?</span>
  <ul>
    <li>
      <a href="#">Yes</a>
    </li>
    <li>
      <a href="#">No</a>
    </li>
    <li>
      <a href="#">No</a>
    </li>
  </ul>
</div>

Very simple block of code. Ignore the second no, as it’s literally only there to give me a third li to help me figure this out. Now, here’s the CSS…

div.feedback {
  position: relative;
}
span {
  float: left;
}
li {
  display: inline-block;
  padding: 0;
  margin: 0;
  border-left: 1px solid #000
}

Now, here’s what’s happening:

See the extra spacing that’s seemingly coming from nowhere? I moved to border-right just to test it, and got even more inconsistent results:

Now, the 3rd LI has 0 padding and margin, as it should. The other two still have a spare space.

Lastly, the browser comprehends the proper height and width of the li, and attributes no margin or padding to it. According to the browser, the text should be smashed up against the border, as I also expect.

Can someone please explain what this extra 3-5 pixels of spacing is on the right of the text?

Answer 1

That’s because linebreaks are treated as a space in HTML. You’ve specified your inner elements to be inline-block, which means that spaces between them are displayed.

You can either:

1. Set the font-size on the parent to 0, and then back to normal on the <li>,
2. Simply eliminate the linebreaks between <li>s.

---

A third (lesser) option exists, it’s the use of float.

float was originally meant to allow for elements to be pushed to the edges of the container, while having text flowing around it freely (like images in a newspaper). That feature was exploited used for layout as well, when people discovered it would make block level elements stack horizontally.

Using float would mean you need to clear after yourself, by either using a clearfix, or having an element with clear: both set on it.

This option is lesser, because much like tabular layouts, it’s not the original purpose of float, implementation may differ between browsers and between time periods, but most importantly, it adds the overhead issues of clearing. (So stick with display: inline-block if you can help it!)