Question

I’m puzzled by this. In a nested list, by setting the height of LI elements the list, the items overlap. What is the explanation for this, and what is the proper way apply height without overlap effect? (I want height, not padding or margins.)

.aaa {background:#ccf;}
.bbb {background:#fcc;}
.bbb li {height:25px;}

<ul class="aaa">
  <li>one one one</li>
  <li>two, too
     <ul>
       <li>alpha</li>
       <li>beta</li>
       <li>gamma</li>
     </ul>
     </li>
  <li>three</li>
  <li>here comes four</li>
</ul>
<ul class="bbb">
  <li>one one one</li>
  <li>two, too
     <ul>
       <li>alpha</li>
       <li>beta</li>
       <li>gamma</li>
     </ul>
     </li>
  <li>three</li>
  <li>here comes four</li>
</ul>

Answer 1

<li>two, too
     <ul>   <-- this list is part of your LI
       <li>alpha</li>
       <li>beta</li>
       <li>gamma</li>
     </ul>
     </li>

Since you have a list nested in a list, the inner list overflows because it is bigger than 25px.

Use min-height instead of height.