链接图像的 html 列表中不需要的填充或间隙答案

【问题标题】：Unwanted padding or gaps in html list of linked images链接图像的 html 列表中不需要的填充或间隙
【发布时间】：2013-11-08 18:09:16
【问题描述】：

我正在尝试使图像列表充当水平导航栏。不幸的是，尽我所能，我无法让图像彼此相邻。我尝试从每个嵌套图像、链接、列表项和无序列表中消除填充、边距和边框。

html代码很简单

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple Menu App</title>
    <link type="text/css" rel="stylesheet" href="css/menu.css" />
</head>
<body>
    <div id="page-1">content</div>
    <div id="footer">
        <ul>
            <li><a href="#"><img src="img/zone.png" alt="toggle zones"></a></li>
            <li><a href="#"><img src="img/nr.png" alt="toggle nr services"></a></li>
            <li><a href="#"><img src="img/wheel.png" alt="toggle wheelchair access"></a></li>
            <li><a href="#"><img src="img/cycle.png" alt="toggle cycle access"></a></li>
        </ul>
    </div>
</body>
</html>

css代码如下

body {
    margin: 0;
}

#footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    text-align: center;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

li {
    width: 40px;
    height: 40px;
    display: inline-block;
    overflow: hidden;
    cursor: pointer;
    margin: 0;
}

li a {
    display: block;
}

li a img {
    border-radius: 0.2em;
    background: #ccc;
    width: 100%;
    border: none;
}

额外细节

图片的自然尺寸为 40 x 40 像素在 chrome 中签入时

图片大小为40px x 40px
a 标签的大小是 40px x 45px ???
li 标签的大小恢复到 40px x 40px
ul和div#footer的高度都是45??
按钮的灰色背景之间有空白

总而言之，我想删除空白并将整个列表的高度降低到按钮的高度（不强制它为 40 像素），因此它仍然适用于我的流畅布局

【问题讨论】：

标签： html css border margin padding

【解决方案1】：

这是因为您将<li> 元素视为inline-blocks。这些本质上表现为文本字符并流动，如果在 HTML 中它们之间有空格，那么页面上也会出现在它们旁边的空格。您可以在<ul> 中将font-size 设置为0，或者使用display: block 和float: left 来实现您想要的效果。

【讨论】：

这不会删除底部空间。 Vertical-align:top 也应该用于<li>elements 和<img>elements。
它为我删除了底部空间。
float 方法的另一个问题是我必须重新考虑将整个地块居中
是的，使用 float 方法需要重新考虑，您可以将 <ul> 居中对齐为 inline-block 并在其中浮动 <li>s。使用浮动块是不那么棘手的选项，但 font-size: 0 应该可以正常工作。

【解决方案2】：

添加 vertical-align: top 给你的 li a img 和你的 li 为了摆脱那个5px的底部空间

要摆脱水平空间，请将<ul>的字体大小设置为0

【讨论】：

@PeterSaxton 将我的解决方案与 LukeGT 的解决方案混合
@PeterSaxton 我在回答中混合了这两种解决方案。

【解决方案3】：

使用display:inline-block 将导致浏览器在<li> 元素周围显示空白字符。为了删除这个额外的空白，你必须做这样的事情：

<ul>
    <li><a href="#"><img src="img/zone.png" alt="toggle zones"></a></li
    ><li><a href="#"><img src="img/nr.png" alt="toggle nr services"></a></li
    ><li><a href="#"><img src="img/wheel.png" alt="toggle wheelchair access"></a></li
    ><li><a href="#"><img src="img/cycle.png" alt="toggle cycle access"></a></li>
</ul>

如您所见，我正在删除标签之间的多余空格。

欲了解更多信息，请参阅：http://css-tricks.com/fighting-the-space-between-inline-block-elements/

【讨论】：

有用的链接，它们看起来都像是烦人的修复，但如果它们有效的话

【解决方案4】：

只需在您的 CSS 中将 <ul> 的 font-size 设置为 0

JSFiddle

【讨论】：