scroll bars showing up when not expecting them line-height and overflow-y issue

Question

I am getting an unexpected (to me) behaviour where a vertical scroll bar is showing up. I do not understand what the constraint on the height of the container might be.

I am able to make this problem go away by either changing the LI's margin:1 or set the UL's lineheight: normal instead of 1.

Can anyone explain what is actually occurring? That is to say what height have I exceeded that requires a vertical scrollbar?

I created a very simple JSFIDDLE to illustrate the issue I am having.

HTML code:

<div class="content-section" >
  <ul >
    <li>cheese</li>
    <li>crackers</li>
  </ul>
</div>

CSS code:

body {
 line-height: 1;
}

ul {
    margin: 0;
}

.content-section {
        overflow-y: auto; 
}

Answer 1

This is because your line-height is set to 1, which means the line-height is the same as the font-size. This causes the font to slightly overflow the line. You need to set line-height to a value greater than the height of the text, as you may have guessed. The text is technically behaving as it should. The height of the box is defined by the height of the lines, but the text is ever so slightly larger than the lines. Your line-height should never be equal to your font-size from a readability standpoint. I hope this helps. I know it doesn't exactly tell you where the height is coming from, but I believe you have successfully explored multiple means of combating it.