如何摆脱水平对齐图像之间的小间隙？ [英] How to get rid of small gaps between horizontally aligned images?

问题描述

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

Please see http://www.rcblue.com/test/Toby.html . There are very narrow vertical gaps between the images. How to get rid of them in html5, without using <table cellpadding="0" cellspacing="0">?

推荐答案

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

You will need to get rid of the cell padding and cell spacing of the table containing the images.

基本上，您的表标记如下所示：

Basically, your table tag will look like:

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

---

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

---

I do recommend against using a table as an image gallery. I would instead just place them all in a div and apply CSS heights, widths, paddings, and margins to your liking.

例如：

HTML :(关闭> 放置在下一行以删除空白区域可能导致内联元素之间出现垂直间隙的内容）

HTML: (closing > placed on next line to remove white-space from the content which can cause vertical gaps in-between inline elements)

<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; 摆脱行之间的水平间隙）

CSS: (img tags assigned vertical-align: bottom; to get rid of horizontal gaps between rows)

.gallery {
    width: 900px;
    }

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

JSFiddle示例。

这篇关于如何摆脱水平对齐图像之间的小间隙？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！