Question

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

Answer 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.

Answer 2

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

Answer 3

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

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

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

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

如何消除水平对齐图像之间的小间隙？

3 个答案: