Remove space on the left of list items

Question

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

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

---

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

---

Expected output

1) Why these margin space exist?

2) How to avoid these margin space?

Answer 1

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:

• Make container shrink-to-fit child elements as they wrap
• How to center a flex container but left-align flex items

Answer 2

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.

Answer 3

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;
}

Answer 4

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>