发现html5一个很奇怪的问题，div里面如果装着一个img，会被无故撑高几个像素，为什么？

程序员文章站 2022-05-09 12:50:59

...

这是html4的DOCTYPE




 style="background:black;float:left">src="http://photocdn.sohu.com/20110902/Img318184717.jpg" />

回复内容：

题主可以看一下这里html - html5 vertical spacing issue with 发现html5一个很奇怪的问题，div里面如果装着一个img，会被无故撑高几个像素，为什么？

几乎是题主问题的一种更详细问答。
我大概看了一下，挺有意思的。我简单翻译一下高票答案：

首先，浏览器并没有所谓的"HTML 5 模式"，而是只有三种：怪异模式(Quirks)，几乎标准的模式(Limited Quirks)和标准模式(Standards)，其中几乎标准的模式和标准模式之间的唯一差异在于是否对元素给定行高(line-height)和基线(baseline)。几乎标准模式中，如果标签所在行没有其他的行内元素，将不指定基线(baseline)，标签因此会紧贴着父元素底部。

在标准模式中，行框总是会包含类似字母"g"，"f"尾巴下伸出来的那一部分空间(针对下行字母)，即使行框内并没有任何内容。因此这种情况下你看到的跟父元素底部几个像素的间隙实际上就是为”字母尾巴“预留的。
使用 XHTML Transitional Doctype会是浏览器运行在”几乎标准模式(Limited Quirks)”。如果你使用XHTML Strict 或者HTML 4 Strict模式，你将看到和使用HTML 5 模式同样的间隙，因为这是标准模式(Standards mode)。

我对题主如此细心的发现表示称赞，当然解决方式很简单，针对多出来的字母尾巴，设置行高或者字体大小为0，或者设置对齐基线垂直居中，至于display:block,一般我是不太推荐的，因为变成块元素又得占一行了……
——————————add——————————
对我而言，搬砖过程中凡是涉及到行内元素(包括发现html5一个很奇怪的问题，div里面如果装着一个img，会被无故撑高几个像素，为什么？

标签)，为了保证不同标签的垂直对齐和题主这种问题，都会考虑是否加上合适的vertical-align，一般取值为middle 图片与父元素下边缘有 2px 的间隙，并不是因为空格。多个 inline-block 元素之间的间隙才是因为空格。
图片父元素之间有间隙，是因为元素默认是基线(baseline)对齐的，即：

vertical-align: baseline;

css样式里添加
img{
display:block;
} 泻药
基本上答差不多了都
我就不废话了
给个链接自己看
RD3020: 在不同的文档模式中，当唯一的非表单控件类行内替换元素存在于其包容块中时，其父框的行高并不一定会计算文本基线高度
闪可以看下我之前的一个回答，问题类似：
为什么a标签中使用img后的高度多了几个像素？ - 大地Dudy 的回答下次遇到这种问题的话，开Devtool，人肉diff 一下computed style 有名的img图片5px问题，题主百度一下img 5px有很多说这里的解决方案。很久以前也发现这个问题啦。
对于这种问题，我一般都是给父元素加一个font-size:0;
不过我现在已经不写代码啦/手动斜眼我也遇到了这个问题，非常感谢大家的回答，作为回报，我提出一个很可能相同原理的bug。
我在svg中使用标签安排中文时，发现中文的实际位置会比给定的参数下沉大约2像素，所以我不得不把y参数上调2像素。想来和本问题真真是一样的。浏览器默认的line-height不为0，如果div中有空格的话有些浏览器会自动撑高，把div的line-height设置为0就行了；
还有的可能是浏览器默认的margin，padding不为0导致，设置为0 即可。

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。