HTML图中的额外填充

Question

我正在尝试对各种自定义复选框输入，我不太确定所有这些填充的来源是什么..

这个想法是显示图像而不是带有文本的复选框，当选择它时，图像的不透明度会降低，以显示其下方的符号，表示它已被选中。

我把它放在这个小提琴里： http://jsfiddle.net/tx76J/1/

<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>​

Answer 1

• 将list-style: none;添加到您的li。问题是由列表标记引起的，如果你删除黑色背景颜色就可以看到它（我确定它仅用于演示，但对于将来的访问者：li应始终只存在于ol或ul）。

  

• 另外，将img设置为display: block以删除底部的空格。出现这种情况是因为默认情况下图像被认为是内嵌的（在此问题中也有解释：White space at bottom of anchor tag ^SO）。

jsFiddle Demo that shows it working