Why is the browser injecting space into my LI?

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:

border-left

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:

border-right

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.

browser no understand

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

Could you make a jsfiddle? That would help us fool around with this little demo — thatidiotguy, Dec 04 '12 at 20:44
I made the JS Fiddle for you guys to fool around with. http://jsfiddle.net/MrXenotype/Z8eCg/ — Felix Guo, Dec 04 '12 at 20:45
The guy below me beat me to it, but I was thinking of the white space in your code as well. There's an extra space because there is a space between the definition of the `

score 2 · Accepted Answer · edited May 23 '17 at 10:24

2

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:

Set the font-size on the parent to 0, and then back to normal on the <li>,
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!)

edited May 23 '17 at 10:24

Community

1
1

answered Dec 04 '12 at 20:46

Madara's Ghost

172,118
50
264
308

Instead of `display:inline-block`, if we use `float:left`, the problem will be solved. – BlackCursor Dec 04 '12 at 20:50
@Crispwind: Yes, but that opens a whole different set of other problems (such as clearing, and height management). No, keep with inline-block, it's the best course of action. Use one of the two workarounds (I recommend #1), to easily solve the problem. Don't forget to /* comment */ on why it's there, since it isn't obvious! – Madara's Ghost Dec 04 '12 at 20:52
Well fancy that. This had me stumped for far too long. I can't believe the browser renders line breaks between the LIs as whitespace. – Dec 04 '12 at 20:54
@one800higgins: You *did* tell it to treat them as inline (blocks), what would happen if it were normal text? You'd expect a space, wouldn't you? :) – Madara's Ghost Dec 04 '12 at 20:55

score 0 · Answer 2 · answered Dec 04 '12 at 20:45

It's from white space in your code. See this jsFiddle example

<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>

score 0 · Answer 3 · answered Dec 04 '12 at 20:50

0

Somewhere you have a display:inline-block.

The inline-block display behaves like this. It shows any space in the code and newlines as spaces.

You have to either manually remove spaces and returns in the HTML or to change the display to something else.

answered Dec 04 '12 at 20:50

FrancescoMM

2,845
1
18
29

Why is the browser injecting space into my LI?

3 Answers3