当前位置：Gxlcms >
html代码 >
发现html5一个很奇怪的问题，div里面如果装着一个img，会被无故撑高几个像素，为什么？
发现html5一个很奇怪的问题，div里面如果装着一个img，会被无故撑高几个像素，为什么？
时间：2021-07-01 10:21:17
帮助过：71人阅读
这是html4的DOCTYPE
- <span class="cp"></span>
- <span class="nt"></span>
- <span class="nt"></span>
- <span class="nt"><div< span=""> <span class="na">style=</span><span class="s">"background:black;float:left"</span><span class="nt">><img< span=""> <span class="na">src=</span><span class="s">"http://photocdn.sohu.com/20110902/Img318184717.jpg"</span> <span class="nt">/></span></img<></span></div<></span>
回复内容：
题主可以看一下这里html - html5 vertical spacing issue with
![]()
几乎是题主问题的一种更详细问答。
我大概看了一下，挺有意思的。我简单翻译一下高票答案：
首先，浏览器并没有所谓的"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——————————
对我而言，搬砖过程中凡是涉及到行内元素(包括
![]()
标签)，为了保证不同标签的垂直对齐和题主这种问题，都会考虑是否加上合适的vertical-align，一般取值为middle
图片与父元素下边缘有 2px 的间隙，并不是因为空格。多个 inline-block 元素之间的间隙才是因为空格。
图片父元素之间有间隙，是因为元素默认是基线(baseline)对齐的，即：
- <code class="language-text">vertical-align: baseline;
- </code>
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 即可。
