Space between li items

Why is there space between li elements
code : https://codepen.io/byte_b/pen/OqZwxX

1 Like

if you set a border:
li {border:1px solid blue;}
you see no space between li.

The space between trash-icons: the font-size/line-height of the “feed”-text probably takes more space than the trash-can. You can try adjusting that font-size/line-height-values

1 Like

You’re coloring the inline <i> element of the trash can, but it may have different displayed height, affected by font-size / line-height, etc, with other elements (neighboring text) within <li> element.

Seems like you’re implementing a button at the beginning of <li>. Instead of using inline <span> / <li>, try to use <button> to be align with the semantic functionality. Within <li>, you can have a <button> and a <div> or <span> element filling the list item content. Using CSS flex will allow you to align the 2 items probably.

1 Like