为何给img设置display:block后父容器的下圆角才能正常生效？

问题原因 #

<img> 标签默认的display属性为inline，属于行内元素，会默认遵循文本排版的基线对齐规则：行内元素默认与父容器的文本基线对齐，基线与行框底部之间会预留出几像素的间隙（用于容纳p、q这类带下坠部分的字母），这个间隙就是你看到的图片底部和父div之间的空白来源。

此时父元素.campus-col的高度由行框高度撑开，比图片实际高度高出了这部分间隙的大小，所以看起来图片没有铺满父容器。父元素设置的border-radius虽生效，但底部露出的间隙会让你误以为圆角没生效。

当你给img添加display: block属性后，图片变为块级元素，不再遵循行内文本的对齐规则，底部的默认间隙会自动消失，图片高度会完全撑满父容器，父元素的overflow: hidden就能正常裁剪图片边缘，下圆角也就可以正常显示了。

其他替代解决方案 #

你也可以通过以下方法实现同样效果，不需要修改img的display属性：

• 给img添加vertical-align: bottom或vertical-align: middle属性，修改行内元素的对齐规则，消除底部间隙
• 给父容器.campus-col添加font-size: 0属性，直接清除行高带来的间隙

内容的提问来源于stack exchange，提问作者Mod