1

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

4

3 回答 3

2

您将需要摆脱包含图像的表格的单元格填充和单元格间距。

基本上，您的table标签将如下所示：

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

我建议不要使用 atable作为图片库。相反，我会将它们全部放在 a 中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 示例。

于 2013-09-28T08:38:02.800 回答
0

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

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

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

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

于 2015-03-27T23:19:07.693 回答
0 
<table cellpadding="0" cellspacing="0">...</table>
于 2013-09-28T08:49:57.163 回答