我搜索了，但我無法弄清楚這個！！如您所知，img 標簽默認是行內塊，但是當我想在它周圍環繞文本時，我不能。我知道行內塊元素的行為類似于行內元素來占據螢屏，我的意思是他們只占據螢屏內容尺寸，但我的問題是為什么 img 元素不讓文本環繞它？我的意思是為什么我們需要使用浮動？
<html lang="fa-IR">
<head>
<meta charset="utf-8">
<title>Html toturial</title>
</head>
<body>
<img src="download.png"/>
hello<br>
hello<br>
hello<br>
</body>
</html>**注意：** download.png 檔案在我的本地 PC 上。
但我可以告訴你結果！ 我的代碼的影像
uj5u.com熱心網友回復：
Inline和inline-block元素呈現在同一行上（例如，想象一下書中的文本行）。由于img是inline-block元素，它與旁邊的文本在同一行上呈現。所以你在你的例子中看到的是三行。第一個包含影像和文本，其他兩個只包含文本。
然而，這里發生了兩件事：
- Inline-block 也有高度（根據定義），這使得第一行更高。
- 該行中的所有元素（默認情況下）與底部垂直對齊。這就是為什么第一行中的文本與影像的下邊框對齊的原因。
如果添加float到影像中，線條的概念就被打破了，這讓后續的內容四處浮動。
uj5u.com熱心網友回復：
當您將文本包裝在<span>元素中時，它會按照您的描述作業，因為<span>s 是行內元素。
<img>是被替換的元素；默認情況下，它的顯示值為 inline，但其默認尺寸由嵌入影像的內在值定義，就像 inline-block 一樣。您可以在影像上設定邊框/邊框半徑、填充/邊距、寬度、高度等屬性。
MDN
<html lang="fa-IR">
<head>
<meta charset="utf-8">
<title>Html toturial</title>
</head>
<body>
<img src="download.png"/>
<span>hello</span>
<span>hello</span>
<span>hello</span>
</body>
</html>uj5u.com熱心網友回復：
inline-block元素具有塊元素的一些屬性和行內元素的一些屬性……它們都沒有“內容環繞它們”的屬性。
影像的渲染很像單個字符。一個大人物。
所以你可以比較這兩段：
img { display: inline-block; }
span { display: inline-block; font-size: 50px; }<p>A <img src="http://placekitten.com/50/50"> that Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad</p>
<p>A <span>k</span>itten that Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad</p>影像生成的行內塊框很像相同大小的字母生成的行內框。
在 HTML/CSS 中環繞影像的文本是通過float屬性實作的；
img { float: left; }
p.foo::first-letter { float: left; font-size: 50px; }<p><img src="http://placekitten.com/50/50"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad</p>
<p class="foo">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad</p>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/390282.html