css - HTML 图形中的额外填充

Question

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

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

我用这个 fiddle 把它归结为: 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 中。问题是由列表标记引起的，如果您删除黑色背景颜色就可以看到它(我确定它仅用于演示，但对于 future 的访问者:li 应该始终存在仅在 ol 或 ul 中)。

  

• 此外，将img 设置为display: block 以去除底部的空间。这是因为默认情况下图像被认为是内联的(也在这个问题中解释:White space at bottom of anchor tag ^SO)。

jsFiddle Demo that shows it working