Css HTML图中的额外填充

我试图有一个自定义的复选框输入排序，我不太确定所有这些填充是从哪里来的

其思想是显示一个图像来代替带有文本的复选框，当选中该复选框时，图像的不透明度会降低，以在其下方显示一个符号，表示该复选框已被选中

我用这把小提琴把它写下来：

​

• 添加

  列表样式：无到您的
  li
  。问题是由列表标记引起的，如果删除黑色背景颜色，您可以看到它（我确信它仅用于演示，但对于未来的访问者：
  li
  应始终仅在
  ol
  或
  ul
  中出现）
  
  

• 另外，将

  img

  设置为

  display:block

  ，以删除底部的空间。这是因为默认情况下图像被认为是内联的（在本问题中也有解释：）

---

我不知道你说的“填充”是什么意思。你指的是底部的黑线吗？我忘了在这一点上重置我的列表样式，但是对

img

的解释真的很有帮助！这完全有道理

<li>
    <input id="1" type="checkbox">
    <label for="1">
        <figure>
            <img src="http://www.moderndandies.com/files/images/Asus-smartphone-android.jpg">          
        </figure>
    </label>
</li>​