CODEWITHSUNDEEP
htmlcsshtml-listsspace
Mansuro
Mansuro

Reputation: 48

Unwanted spaces between li

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

enter image description here

Chrome tells me there is no padding/margin:

enter image description here

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>

Upvotes: 1

Views: 74

Answers (3)

sol
sol

Reputation: 22919

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>

Upvotes: 4

Pons Purushothaman
Pons Purushothaman

Reputation: 2261

try applying width:100%; float:left; to the <LI> and/or <div>

I am adding a sample here. Please check it.

ul li{
        border-bottom: 1px solid red;
        margin: 0;
        list-style: none;
    }
    ul li div{
        width: 100%; 
        height: 40px;
        background-color: green; 
        display: block;
    }
<ul>
    <li>
       <div>
      </div>
    </li>
    <li>
       <div>
      </div>
    </li>
    <li>
       <div>
      </div>
    </li>
    <li>
       <div>
      </div>
    </li>
</ul>

Upvotes: 0

Asad Butt
Asad Butt

Reputation: 56

Remove Height on your inline-style div

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

Upvotes: 2

Related Questions