容器尺寸有问题答案

【问题标题】：Having trouble with container dimensions容器尺寸有问题
【发布时间】：2016-08-21 04:09:11
【问题描述】：

我的目标是使用 4 张图像创建一个完美的正方形，其中 2 张叠放在其他图像之上。我使用的图像是 250px x 250px。因此，正方形的尺寸应为 500px x 500px。如果您查看我链接的钢笔，您会看到容器的尺寸为 500 像素 x 506 像素。每张图像下方额外的 3 个像素是从哪里来的？不应有任何填充或边距添加到容器的尺寸。

HTML（翡翠）

.work-container
    a(href='/'): img.work-thumbnail(src='http://placehold.it/250x250')
    a(href='/'): img.work-thumbnail(src='http://placehold.it/250x250')
    a(href='/'): img.work-thumbnail(src='http://placehold.it/250x250')
    a(href='/'): img.work-thumbnail(src='http://placehold.it/250x250')

CSS (Sass)

// ----- #WORK -----//

//------------------//

.work-container
    width: 500px
    background-color: lightgreen
    display: flex
    flex-wrap: wrap

编辑：我知道我可以轻松地将锚元素的高度设置为 250 像素，但我想知道是什么导致每张图像显示这些额外的 3 像素。

【问题讨论】：

stackoverflow.com/q/32801095/3597276

标签： html css containers flexbox

【解决方案1】：

将此添加到您的 Sass。

.work-container img
    display: block

【讨论】：

Welp，这绝对解决了它。因此，如果图像默认为 display: inline-block ，那么那些额外的像素来自哪里？仍然想知道那里的基本理论。