我的目标是使用 4 张图片创建一个完美的正方形，其中 2 张堆叠在其他图片之上。我使用的图像是 250px x 250px。因此，正方形的尺寸应为 500px x 500px。如果您查看我链接的笔，您会看到容器的尺寸为 500 像素 x 506 像素。每张图片下方额外的 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(萨斯)
// ----- #WORK -----//
//------------------//
.work-container
width: 500px
background-color: lightgreen
display: flex
flex-wrap: wrap
编辑:我知道我可以轻松地将 anchor 元素设置为 250 像素的高度，但我想知道是什么导致每张图片显示额外的 3 像素。
最佳答案
将它添加到你的 Sass 中。
.work-container img
display: block
关于html - 容器尺寸有问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36880028/