html - 图像在 div 中未正确居中

Question

我有一个 div，其中一行有 5 个图像，每个图像 300 像素。每边有 10px 的边距，它们应该适合我的 1600px 宽的 div，但最后一张图片会撞到下一行。为什么不合适？经过一些尝试和错误后，我发现当我将边距调整为 8.5px 时，它们可以正确匹配，但这似乎没有意义？我没有任何其他边框、填充等。

这是我的 CSS:

#wrap {
    width: 1600px;
    margin: 0 auto;
    background-color: red;
}

.image {
    width: 300px;
    margin: 8px 10px 0 10px;
    vertical-align: text-top;
}

我的 HTML 看起来像这样:

<div id="wrap">
<div id="portfolio">
    <section>
        <a><img></a>
        <a><img></a>
        <a><img></a>
        <a><img></a>
        <a><img></a>
    </section>
    <section>
        <a><img></a>
        <a><img></a>
        <a><img></a>
        <a><img></a>
        <a><img></a>
    </section>
</div>

Answer 1

... but the last image is bumping to the next line. Why is it not fitting?

您遇到的问题是white-space margin .

行内元素的右/下边缘有一个小边距，使你的计算变得错误。

解决这个问题的最简单方法可能是将 wrap 设置为 display: flex