li元素中的边距/填充

Question

如何修复边距/填充的奇怪效果？ （jsfiddle）：i.imgur.com/64S8C.jpg我在li元素中不需要任何边距/填充。

Answer 1

尝试使用float属性：

li img {
    float: left;
}

或vertical-align：

li img {
    vertical-align:middle;
}

Answer 2

由于边距或填充，不会创建文本和图像周围的额外空间，而是因为图像相对于文本垂直对齐的方式。

通过将vertical-align: middle设置为图像，您将非常接近您想要的图像。为了使其完美，请使用负上边距调整图像位置，直到它位于您想要的位置。以下（jsfiddle）对我很有用：

li img {
    vertical-align: middle;
    margin-top: -3px;
}