blocks|key|1099448|text|如果希望<img>是内联元素，则可以使用vertical-align+CSS属性指定图像将如何相对于其出现的文本行对齐。此页在“内联元素上的垂直对齐”标题下有示例。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1099449|entityMap|0|LINK|mutability|MUTABLE|url|http://phrogz.net/CSS/vertical-align/index.html^0|4|5|K|E|1O|2|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]|$9|Q|A|R|B|C]]|D|@$9|S|A|T|1|U]]|E|$]]|$1|F|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

If you want the <code>&lt;img&gt;</code> to be an inline element, you can use the <code>vertical-align</code> CSS attribute to specify how the image will be aligned relative to the line of text it appears in. <a href="http://phrogz.net/CSS/vertical-align/index.html" rel="nofollow noreferrer">This page</a> has examples under the "vertical-align on inline elements" heading.

blocks|key|1099435|text|CSS有两种类型的display:属性:块和内联。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1099436|内联就像文字。它源源不断，包裹在盒子的末端，诸如此类的东西。|1099437|块是块状的，具有边距、填充和宽度(计算或导出)。|1099438|这并不完全合理，但<img>实际上是一个内联元素，以及<a>,+<abbr>和许多其他元素。正在发生的事情是，图像实际上被大致地渲染成字母，而它恰好没有12+it高，但是可能是130‘s或者你的图像。这就是为什么它会粘起来。|1099439|声明<img+style="display:block;"+src="image.png"+/>使其表现得像大多数人认为的那样。|1099440|entityMap^0|9|8|0|0|0|9|5|R|B|0|2|1A|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|T|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|L|3|M|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|N|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|O|$]]

CSS has two types of <code>display:</code> attributes: block and inline.

Inline is like text. It streams along, wraps at the end of a box, stuff like that.

Block is chunky and has margins and padding and width (either calculated or derived). 

It doesn't make a whole lot of sense, but <code>&lt;img&gt;</code> is actually an inline element, along with <code>&lt;a&gt;, &lt;abbr&gt;</code> and many others. What's happening is that the image is actually being rendered roughly equivalent to letters, and it just happens to not be 12pt tall, but maybe 130px or whatever your image is. That's why it sticks up.

Declare <code>&lt;img style="display:block;" src="image.png" /&gt;</code> to get it to behave like the box most people think it is.

blocks|key|1138218|text|要让文本环绕图像，关键是设置如下的float属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1138219|img+{
float:left;
display:block;
}|code-block|syntax|javascript|1138220|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The key to getting your text to wrap around your image is setting the float attribute like so:

<pre><code>img {
float:left;
display:block;
}
</code></pre>

blocks|key|1099755|text|你在img下面看到的是像g或j这样的字形的后代所需要的空间。图像就像字母一样，位于基线上。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1099756|img
{
++++display:+block;
}|code-block|syntax|javascript|1099757|会帮你解决的。|1099758|一种可能会给人一些启示的经验：|1099759|<p+style="font-size:+1em;">Lorem+ipsum+dolor+<em+style="font-size:+800%25;">sit+amet.|1099760|将看作是一个~128+as高映像(如果1em是16+as，就是这样)。|offset|length|style|CODE|1099761|entityMap^0|0|0|0|0|0|1|4|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|Z|8|@$O|10|P|11|Q|R]]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

What you see under the img is the space needed for the descendant part of a glyph like g or j. An image behaves just like a letter and sits on the baseline.

<pre><code>img
{
 display: block;
}
</code></pre>

Will fix it for you.

An experiement that might shed some light:

<pre><code>&lt;p style="font-size: 1em;"&gt;Lorem ipsum dolor &lt;em style="font-size: 800%;"&gt;sit&lt;/em&gt; amet.&lt;/p&gt;
</code></pre>

Think of the <code>&lt;em&gt;</code> as a ~128px high image (if 1em is 16px that is).

blocks|key|1099423|text|IMG元素的位置与任何其他内联元素一样。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1099424|entityMap^0|0|3|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<code>IMG</code> elements get positioned just like any other inline element.

blocks|key|2662543|text|如果您希望更多地控制您的图像定位，请将图像包装在DIV中，并控制DIV的定位。如果要将div与文本混合，则可以浮动div。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2662544|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

If you want more control over your image positioning, wrap your image in a DIV and control the positioning of the DIV. You can float the div if you want to intermingle it with your text.

blocks|key|2662595|text|在这种情况下，这可能与此无关(希望以前的答案会解决您的问题)，但是如果您发现您在元素周围得到了意想不到的额外空间，请确保删除了浏览器通常添加到元素中的默认填充空间、边距等(当然，不同的浏览器通常会添加不同数量的填充空间、页边距等等。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2662596|如果您确保您已将空白和填充等归零，请使用|2662597|body+{+margin:+0;+padding:+0;+border:+0;+}|code-block|syntax|javascript|2662598|在CSS开始时，您可以添加任何填充和边距等，而不必担心浏览器的默认值会导致任何意外的空间，希望浏览器之间的不一致性会减少。|2662599|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

This might not be relevant in this particular case (hopefully the advice from previous answers should solve your problem), but if you're finding you're getting unexpected extra space around elements, make sure that you've removed the default padding, margins etc. that browsers often add to elements (and of course different browsers often add different amounts of padding, margins etc.

If you make sure you've zeroed margins and padding etc. by using

<pre><code>body { margin: 0; padding: 0; border: 0; }
</code></pre>

at the start of your CSS, you can then add any padding and margins etc. without having to worry that the browser's defaults are going to cause any unexpected spaces, and hopefully fewer inconsistencies between browsers.

I can't seem to wrap my head around how img tags behave alongside text in an html page.

I've removed margins and padding, but there always seems to be some extra space under the img or some other unexpected behavior. I'm sure theres quick CSS workaround using absolute positioning or negative margins but I'm looking for a more general solution.

Question: Can someone explain how img tags are positioned, specifically why do they get offset vertically when alongside text?

<img> positioning behavior

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

我似乎无法理解img标签在html页面中如何与文本一起运行。我删除了边距和填充，但似乎总是有一些额外的空间下的img或一些其他意想不到的行为。我相信有快速的CSS解决方案使用绝对定位或负利润率，但我正在寻找一个更普遍的解决方案。问题：能否解释img标签是如何定位的，特别是为什么当它们与文本一起垂直偏移时？

问<img>定位行为
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问<img>定位行为EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问<img>定位行为
EN