Unwanted spaces between li

Question

I'm trying to separate li-items by adding a border-bottom to them. However, there are unwanted spaces appearing:

Chrome tells me there is no padding/margin:

Does anyone know where these spaces come from?

Code:

<ul style="list-style-type: none; padding: 0;">
  <% 15.times do |whatever| %>
    <li style="border-bottom: 1px solid red;">
       <div style="width: 100%; height: 50px; background-color: green; display: block; ">
      </div>
    </li>
  <% end %>
</ul>

Answer 1

You are seeing a problem with pixel rounding.

You can add the border to div instead, which appears to allow zooming without artefacts.

li div {
  border-bottom: 1px solid red;
}

<ul style="list-style-type: none; padding: 0;">
  <li>
    <div style="width: 100%; height: 50px; background-color: green; display: block; ">
    </div>
  </li>
  <li>
    <div style="width: 100%; height: 50px; background-color: green; display: block; ">
    </div>
  </li>
  <li>
    <div style="width: 100%; height: 50px; background-color: green; display: block; ">
    </div>
  </li>
  <li>
    <div style="width: 100%; height: 50px; background-color: green; display: block; ">
    </div>
  </li>
  <li>
    <div style="width: 100%; height: 50px; background-color: green; display: block; ">
    </div>
  </li>
  <li>
    <div style="width: 100%; height: 50px; background-color: green; display: block; ">
    </div>
  </li>
  <li>
    <div style="width: 100%; height: 50px; background-color: green; display: block; ">
    </div>
  </li>
  <li>
    <div style="width: 100%; height: 50px; background-color: green; display: block; ">
    </div>
  </li>
  <li>
    <div style="width: 100%; height: 50px; background-color: green; display: block; ">
    </div>
  </li>
</ul>