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

Question

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

Answer 1

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

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

<table cellpadding="0" cellspacing="0">...</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.