Question

Link to CodePen

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

HTML（Jade）

.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

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

Answer 1

将此添加到您的Sass中。

.work-container img
    display: block

容器尺寸有问题

1 个答案: