Question

有没有办法删除HTML List Item标签底部显示的额外空格而不在列表项上设置固定高度？ I.e。我希望列表项包含其内容。

以下代码在水平列表中显示3个图像，但每个li标签的高度比图像高4px。我希望它包裹图像，即具有相同的宽度和高度。宽度目前是相同的，但我无法得到匹配的高度。

HTML：

<ul>
    <li><img alt="img1" src="img1.jpg" /></li>
    <li><img alt="img2" src="img2.jpg" /></li>
    <li><img alt="img3" src="img3.jpg" /></li>
</ul>

CSS：

li 
{ 
    display:block; 
    float:left; 
    margin:0;
    padding:0;
    background-color:Yellow;
}

Answer 1

这是您的代码：http://jsfiddle.net/23LcK/

差距与li无关。这是为g和p等字母中的下行者保留的空间（因为img是inline元素。）

您可以使用应用于li img的任何内容将其删除：

display: block：http://jsfiddle.net/23LcK/1/
vertical-align与top或bottom：http://jsfiddle.net/23LcK/2/

Answer 2

设置行高：0;关于LI

li {
  line-height: 0;
}

这是一个证明它有效的方法 - http://jsfiddle.net/jm9Tj/

Answer 3

这应该为你做。

ul{margin-bottom:0}

Answer 4

li包含在ul中，默认情况下有一些填充。因此，正如@Michael所说，你必须将ul元素的填充清零。

要避免这些问题，请务必使用reset.css。

仅供参考：浏览器在网页上应用默认CSS。这就是为什么当您的网站中没有CSS时，您会看到h1元素很大的原因。因为浏览器有一个默认的CSS。由于浏览器来自不同的公司，因此它们具有不同的默认CSS。例如，浏览器可以使用10px的页边距，而另一个浏览器用户可以使用12px。这意味着您的设计始终存在不一致之处。但CSS重置是由一些删除这些默认CSS样式的通用规则组成的。

Answer 5

li img {
    vertical-align: bottom;
}

Answer 6

您正在使用的浏览器中的img元素可能存在默认边距或填充。您可以使用以下内容删除它：

li img {
    margin: 0;
    padding: 0;
}

由于不同的Web浏览器使用不同的默认样式，因此建议您使用重置样式表。这将整个内容设置为合理的默认值，因此您可以在浏览器中获得更一致的样式。因为它会将所有内容重置为合理的默认值，所以应始终在任何其他样式表之前加载重置样式表。

正如@Saeed所说，有一个很好的重置样式表以及有关你应该使用它们here的原因的更多信息。

删除HTML列表项底部的额外空格

6 个答案: