如何摆脱水平对齐图像之间的小间隙？答案

【问题标题】：How to get rid of small gaps between horizontally aligned images?如何摆脱水平对齐图像之间的小间隙？
【发布时间】：2015-03-28 07:19:07
【问题描述】：

请参阅http://www.rcblue.com/test/Toby.html 。图像之间的垂直间隙非常窄。如何在不使用<table cellpadding="0" cellspacing="0"> 的情况下摆脱html5 中的它们？

【问题讨论】：

标签： css html image

【解决方案1】：

您需要去掉包含图像的表格的单元格填充和单元格间距。

基本上，您的table 标签看起来像：

<table cellpadding="0" cellspacing="0">...</table>

我建议不要使用table 作为图片库。相反，我会将它们全部放在 div 中，并根据自己的喜好应用 CSS 高度、宽度、填充和边距。

例如：

HTML：（关闭 > 放置在下一行以从内容中删除可能导致内联元素之间的垂直间隙的空白）

<div class="gallery">
    <img src="Toby1.jpg" alt="Toby close-up"
    ><img src="Toby1.jpg" alt="Toby close-up"
    ><img src="Toby1.jpg" alt="Toby close-up"
    ><img src="Toby1.jpg" alt="Toby close-up"
    ><img src="Toby1.jpg" alt="Toby close-up"
    ><img src="Toby1.jpg" alt="Toby close-up">
</div>

CSS：（img 标签分配 vertical-align: bottom; 以消除行之间的水平间隙）

.gallery {
    width: 900px;
    }

    .gallery > img {
        vertical-align: bottom;
        }

JSFiddle example.

【讨论】：

只需浮动图像以消除它们之间的间隙：jsfiddle.net/Rxg8n/1。比指望标记的确切布局更可靠。
浮动需要事后清理，这是另一项费用。我想的优点和缺点。 :)
这就是为什么我添加了overflow:hidden...对于这种情况很简单。
确实如此。我也经常使用它（尽管怀疑它不是overflow: hidden 的预期用途）。他们以任何其他方式实施overflow: hidden 的风险可能无需担心。
@SombreErmine 为什么说，“我确实建议不要将表格用作图片库。我会将它们全部放在一个 div 中并应用 CSS 高度、宽度、填充和边距你的喜好。”当 ...
如此简单且完美运行时？

【解决方案2】：

<table cellpadding="0" cellspacing="0">...</table>

【讨论】：

是的！但是，validator.w3.org/unicorn> 告诉我“表格元素上的 cellpadding 属性已过时。请改用 CSS。”和“ table 元素上的 cellpadding 属性已过时。改用 CSS。”所以我会看看其他答案。我确实想学习 HTML5

【解决方案3】：

您的链接已失效，因此我不确定您最初是否使用基于表格的布局来执行此操作。

要在没有基于表格的布局的情况下执行此操作，您必须执行两个步骤：

确保<img> 标记之间没有空格。这将消除图像之间的水平空间。
将<img> 标记放在div 元素中，其CSS 样式包括line-height: 0。这将消除图像之间的垂直空间。

有一个例子和进一步的解释here。

【讨论】：