在一个div里有3px的额外高度，里面有一个图片 [英] 3px extra height on a div with an image inside it

问题描述

我正在一个新网站上工作，但有一个小设计，我无法摆脱困境。

I'm working on a new site but there is a small design thing which I just can't get my head around.

基本上，我正在创建一个网站，用户可以上传有趣的图片。虽然图片显示的区域下方有3px的间隙。 这里有一个链接，指向我的意思，死链接截图。

Basically, I'm creating a site which users are able to upload funny pictures to. Although the area where the picture is displayed there is a 3px gap underneath. Here's a link to a screenshot of what I mean, dead link.

我已经尝试了很多东西，但似乎没有任何效果。如果任何人都可以提出任何解决方案，请做。

I've tried a ton of things but nothing seems to work. If anyone can suggest any solution, please do.

谢谢。

Thanks.

推荐答案

<这是由于图像的默认 vertical-align 值。它们是 baseline 。更改为顶部或底部，它将消失。

It's due to the default vertical-align value of images. They are baseline. Change to top or bottom and it will go away.

img{
    vertical-align: top;
}

额外空间是基线下的区域，用于悬挂在下面的字母如 y 或 g 。

The extra space is the area below the baseline which is for letters that hang below like y or g.

这篇关于在一个div里有3px的额外高度，里面有一个图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！