blocks|key|916506|text|这是因为“基线”发生在内联元素上。“基线”是元素的默认vertical-align(如果我错了请更正)，最显著的是内联元素(比如span和锚)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|916507|为了向你展示我的意思，试着把像"qfx“这样的文字放在图像旁边。您会注意到，图像的底部与"x“的底部是一致的。这是基线对齐--您的<img>标记就在上面。|916508|但锚标签将占据"q“的底部。锚标签将占据超过基线，直到底部。|916509|entityMap^0|R|E|0|1T|5|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|R|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|K|$]]

this happens because of "baseline" which happens to elements that are inline. "baseline" is the default (correct me if i'm wrong) <code>vertical-align</code>for elements, most notably for inline elements (like span and anchors)

to show you what i mean, try placing text like the letters "qfx" right beside the image. you will notice that the bottom of the image is in line with the bottom of "x". that's the baseline alignment - on which your <code>&lt;img&gt;</code> tag is sitting on. 

but the anchor tag will occupy until the bottom of "q". anchor tags will occupy beyond the baseline, until the bottom.

blocks|key|436644|text|要理解这种情况，可以将内联图像想象成来自不同字体/大小的字母。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|436645|接下来，请参阅这里的示例：http://phrogz.net/css/vertical-align/index.html|offset|length|436646|entityMap|0|LINK|mutability|MUTABLE|url|http://phrogz.net/css/vertical-align/index.html^0|0|D|1B|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

To understand the situation, think about inline images as letters from a different font/size.

Next, see the examples here:
<a href="http://phrogz.net/css/vertical-align/index.html" rel="nofollow">http://phrogz.net/css/vertical-align/index.html</a>

blocks|key|916511|text|这是由line-height和vertical-align的结合引起的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|916512|快速示例：http://jsfiddle.net/3A3sw/1/|916513|另见http://www.w3.org/wiki/CSS/Properties/vertical-align|916514|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/3A3sw/1/|1|http://www.w3.org/wiki/CSS/Properties/vertical-align^0|3|B|F|E|0|5|S|0|0|2|1G|1|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|H|3|I|5|6|7|12|8|@]|D|@$9|13|A|14|1|15]]|E|$]]|$1|J|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]|R|$5|M|N|O|E|$P|S]]]]

It's caused by a combination of <code>line-height</code> and <code>vertical-align</code>.

Quick example: <a href="http://jsfiddle.net/3A3sw/1/" rel="nofollow">http://jsfiddle.net/3A3sw/1/</a>

See also <a href="http://www.w3.org/wiki/CSS/Properties/vertical-align" rel="nofollow">http://www.w3.org/wiki/CSS/Properties/vertical-align</a>

blocks|key|436615|text|在某些浏览器中，内联图像通常会导致在图像下面添加几个像素的空白。如果你在谷歌上搜索，你会发现这是一个常见的问题。以下是一些参考链接。第一个问题是重复的堆栈溢出问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|436616|在div中的图像在图像下面有额外的空间。|unordered-list-item|offset|length|436617|详细说明@+Mozilla开发人员网络|436618|http://www.tequilafish.com/2009/04/29/css-removing-extra-space-underneath-an-image/|436619|http://askthecssguy.com/articles/inline-images-showing-a-gap-of-space-on-the-bottom-and-one-way-to-get-around-it/|436620|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/5804256/why-an-image-inside-a-div-has-an-extra-space-below-the-image|1|https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps|2|3^0|0|0|K|0|0|0|J|1|0|0|2B|2|0|0|35|3|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@$E|10|F|11|1|12]]|A|$]]|$1|G|3|H|5|D|7|13|8|@]|9|@$E|14|F|15|1|16]]|A|$]]|$1|I|3|J|5|D|7|17|8|@]|9|@$E|18|F|19|1|1A]]|A|$]]|$1|K|3|L|5|D|7|1B|8|@]|9|@$E|1C|F|1D|1|1E]]|A|$]]|$1|M|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]|W|$5|P|Q|R|A|$S|J]]|X|$5|P|Q|R|A|$S|L]]]]

Inline images often cause a few pixels of blank space to be added below the image in some browsers. If you google this, you'll see it's a common issue.
Here are some links for reference. The first is a duplicate Stack Overflow question:

<ul>
<li><a href="https://stackoverflow.com/questions/5804256/why-an-image-inside-a-div-has-an-extra-space-below-the-image">Image inside div has extra space below the image</a></li>
<li><a href="https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps" rel="nofollow noreferrer">Detailed Explanation @ Mozilla Developer Network</a></li>
<li><a href="http://www.tequilafish.com/2009/04/29/css-removing-extra-space-underneath-an-image/" rel="nofollow noreferrer">http://www.tequilafish.com/2009/04/29/css-removing-extra-space-underneath-an-image/</a></li>
<li><a href="http://askthecssguy.com/articles/inline-images-showing-a-gap-of-space-on-the-bottom-and-one-way-to-get-around-it/" rel="nofollow noreferrer">http://askthecssguy.com/articles/inline-images-showing-a-gap-of-space-on-the-bottom-and-one-way-to-get-around-it/</a></li>
</ul>

blocks|key|916545|text|一个尚未提到的解决方案是显式地设置图像及其父容器的高度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|916546|所以，例如，使用这样的HTML|916547|<div+class="wrap">
++++<div+class="line">
++++++++<a+href=""><img+src="/favicon.ico"+/></a>
++++</div>
</div>​|code-block|syntax|javascript|916548|这个CSS将打破你提到的“奇怪的”间距：(这里的其他答案已经解释过了)|916549|div.wrap+{background-color:#9f3;+width:100px;}
a,img+{border:none;+height:+16px;}
div.line{background-color:+yellow;+height:+16px;+border-top:+1px+solid+black;+border-bottom:+1px+solid+black;}​|916550|活测试用例。|offset|length|916551|如果您不知道高度或有很多这样的图像，您可以使用简单的客户端脚本来自动设置高度。|916552|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/kEMFQ/^0|0|0|0|0|0|0|5|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|13|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|15|8|@]|9|@$O|16|P|17|1|18]]|A|$]]|$1|Q|3|R|5|6|7|19|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

One solution that wasn't mentioned yet is to explicitly set the height of the image and its parent container.

So for example with such HTML

<pre><code>&lt;div class="wrap"&gt;
 &lt;div class="line"&gt;
 &lt;a href=""&gt;&lt;img src="/favicon.ico" /&gt;&lt;/a&gt;
 &lt;/div&gt;
&lt;/div&gt;​
</code></pre>

This CSS will bust the "bizarre" spacing you mention: (which is already explained in other answers here)

<pre class="lang-css prettyprint-override"><code>div.wrap {background-color:#9f3; width:100px;}
a,img {border:none; height: 16px;}
div.line{background-color: yellow; height: 16px; border-top: 1px solid black; border-bottom: 1px solid black;}​
</code></pre>

<a href="http://jsfiddle.net/kEMFQ/" rel="nofollow">Live test case</a>.

If you don't know the height or have lots of such images, you can use simple client script to set the height automatically.

Why is there some strange spacing with <code>&lt;img/&gt;</code> tags in a paragraph <code>&lt;p&gt;</code>?

I noticed this from using firebug where the img is maybe 4-5 pixels above where the text should be inline.

Example:
<a href="http://jsbin.com/epavij" rel="nofollow">http://jsbin.com/epavij</a>

Here the <code>&lt;a&gt;</code> tag is surrounding the <code>&lt;img/&gt;</code> and the <code>&lt;a&gt;</code> is shown to take up a smaller space down a few pixels.

Obviously <code>display:block</code> fixes this problem, but what is causing it?

For argument's sake I plan to have the image inline with some text; though I have tested, and adding text does not fix the problem.

Bizzare <img/> tag spacing

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

为什么<img/>标记在段落中有一些奇怪的间距？我在使用firebug时注意到了这一点，其中img可能比文本应该内联的位置高出4-5像素。示例：在这里，<a>标记围绕着<img/>，<a>在几个像素处占据了较小的空间。显然，display:block修复了这个问题，但是是什么原因造成的呢？为了论证起见，我计划让图像与一些文本保持一致；虽然我已经测试过，但是添加文本并不能解决这个问题。

问Bizzare <img/>标签间距
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bizzare <img/>标签间距EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bizzare <img/>标签间距
EN