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


i getting unexpected (to me) behaviour vertical scroll bar showing up. not understand constraint on height of container might be.

i able make problem go away either changing li's margin:1 or set ul's lineheight: normal instead of 1.

can explain occurring? height have exceeded requires vertical scrollbar?

i created simple jsfiddle illustrate issue 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;  } 

this because line-height set 1, means line-height same font-size. causes font overflow line. need set line-height value greater height of text, may have guessed. text technically behaving should. height of box defined height of lines, text ever larger lines. line-height should never equal font-size readability standpoint. hope helps. know doesn't tell height coming from, believe have explored multiple means of combating it.


Comments

Popular posts from this blog

java - Jmockit String final length method mocking Issue -

asp.net - Razor Page Hosted on IIS 6 Fails Every Morning -

c++ - wxwidget compiling on windows command prompt -