CODEWITHSUNDEEP
htmlcssflexbox
overexchange
overexchange

Reputation: 1

Remove space on the left of list items

ul {
  display: flex;
  flex-wrap: wrap;
  width: 45%;
  height: 40%;
  border: 1px solid red;
  list-style: none;
  margin: 0 auto;
}

ul li {
  flex: 1;
}
<ul>
  <li><img src="images/yellow.gif" alt="Yellow"></li>
  <li><img src="images/orange.gif" alt="Orange"></li>
  <li><img src="images/purple.gif" alt="Purple"></li>
  <li><img src="images/blue.gif" alt="Blue"> </li>
  <li><img src="images/pink.gif" alt="Pink"> </li>
  <li><img src="images/green.gif" alt="Green"> </li>
  <li><img src="images/black.gif" alt="Black"> </li>
  <li><img src="images/gray.gif" alt="Gray"> </li>
  <li><img src="images/red.gif" alt="Red"> </li>
</ul>

Actual output

enter image description here

As per the actual output, there is left-margin on inspecting ul element, as shown below,

enter image description here

there is also right-margin on inspecting li element, as shown below

enter image description here

Expected output

enter image description here

1) Why these margin space exist?

2) How to avoid these margin space?

Upvotes: 2

Views: 3551

Answers (4)

Razvan Zamfir
Razvan Zamfir

Reputation: 4694

Setting padding: 0; on the list helps:

ul {
  display: flex;
  flex-wrap: wrap;
  width:  300px;
  border: 1px solid red;
  list-style: none;
  margin: 0 auto;
  padding: 0;
}

ul li {
  display: flex;
  flex-grow: 1;
}

ul li img {
  flex-grow: 1;
}
<ul>
  <li><img src="https://dummyimage.com/100x100/ffff00/000" alt="Yellow"></li>
  <li><img src="https://dummyimage.com/100x100/FFA500/000" alt="Orange"></li>
  <li><img src="https://dummyimage.com/100x100/800080/fff" alt="Purple"></li>
  <li><img src="https://dummyimage.com/100x100/0000FF/fff" alt="Blue"></li>
  <li><img src="https://dummyimage.com/100x100/FF69B4/fff" alt="Pink"></li>
  <li><img src="https://dummyimage.com/100x100/006600/fff" alt="Green"></li>
  <li><img src="https://dummyimage.com/100x100/000000/fff" alt="Black"></li>
  <li><img src="https://dummyimage.com/100x100/cccccc/000" alt="Gray"></li>
  <li><img src="https://dummyimage.com/100x100/ff0000/fff" alt="Red"></li>
</ul>

Upvotes: 0

Michael Benjamin
Michael Benjamin

Reputation: 371949

The whitespace on the left is caused by the default padding on the ul. Remove it with:

ul { padding-left: 0; }

Note that some browsers may use margin instead of padding for this indentation.

The whitespace on the right is caused by the flex-wrap property. When flex items wrap, the container does not recalculate its width to shrink-wrap the new layout.

By re-sizing the window horizontally, you'll see the right spacing come and go in this demo.

Here are some more details and a possible workaround:

Upvotes: 8

dippas
dippas

Reputation: 60573

ul by default has padding, so remove it:

img {
  display: block /*fix inline gap */
}
ul {
  display: flex;
  flex-wrap: wrap;
  width: 50%; /*changed */
  height: 40%;
  border: 1px solid red;
  list-style: none;
  margin: 0 auto;
  padding: 0
}
ul li {
  flex:1;
}
<ul>
  <li>
    <img src="http://placehold.it/100/ff0" alt="Yellow">
  </li>
  <li>
    <img src="http://placehold.it/100/f90" alt="Orange">
  </li>
  <li>
    <img src="http://placehold.it/100/c6f" alt="Purple">
  </li>
  <li>
    <img src="http://placehold.it/100/06c" alt="Blue">
  </li>
  <li>
    <img src="http://placehold.it/100/fcf" alt="Pink">
  </li>
  <li>
    <img src="http://placehold.it/100/0f0" alt="Green">
  </li>
  <li>
    <img src="http://placehold.it/100/000" alt="Black">
  </li>
  <li>
    <img src="http://placehold.it/100/666" alt="Gray">
  </li>
  <li>
    <img src="http://placehold.it/100/f00" alt="Red">
  </li>
</ul>

NOTE: In this snippet above you will have, at same point, the desired output, but as pointed out by Michael_B :

When the flex items wrap, the container does not recalculate its width to perfectly shrink-wrap the new layout.

So If I was you I would try another approach.

Upvotes: 2

David Wilkinson
David Wilkinson

Reputation: 5118

Browsers put a certain amount of padding on ul's (Chrome adds 40px to the left). You can override this by adding padding: 0 to the ul: https://jsfiddle.net/2ocbyhdc/

ul{
    display: flex;
    flex-wrap: wrap;
    width: 45%;
    height: 40%;
    border: 1px solid red;
    list-style: none;
    margin: 0 auto;
    padding: 0;
}

Upvotes: 0

Related Questions