是<img>元素塊級還是內聯級？

Question

我在某處讀到<img>元素的行為類似於兩者。 如果正確，有人可以用例子解釋一下嗎？

Answer 1

的確，它們都是——或者更准確地說，它們是“內聯塊”元素。 這意味着它們像文本一樣內聯流動，但也像塊元素一樣具有寬度和高度。

在 CSS 中，您可以將元素設置為display: inline-block以使其復制圖像的行為*。

圖像和對象也稱為“替換”元素，因為它們本身沒有內容，元素本質上被二進制數據替換。

* 請注意，瀏覽器在技術上使用display: inline （如開發人員工具中所見），但它們對圖像進行了特殊處理。 它們仍然遵循inline-block所有特征。

Answer 2

img元素是被替換的內聯元素。

它的行為就像一個內聯元素（因為它是），但是一些關於內聯元素的概括不適用於img元素。

例如

概括：“寬度不適用於內聯元素”

規范實際上說的是：“適用於：所有元素，但不可替換的內聯元素、表格行和行組”

由於圖像是替換的內聯元素，因此它確實適用。

Answer 3

IMG 元素是內聯的，這意味着除非它們是浮動的，否則它們將與文本和其他內聯元素一起水平流動。

它們是“塊”元素，因為它們具有寬度和高度。 但在這方面，它們的行為更像是“內聯塊”。

Answer 4

對於幾乎所有目的，都可以將它們視為具有寬度設置的內聯元素。 基本上，您可以使用 CSS 自由決定圖像的顯示方式。 我通常設置一些圖像類，如下所示：

img.center {display:block;margin:0 auto;}

img.left {float:left;margin-right:10px;}

img.right  {float:right;margin-left:10px;}

img.border  {border:1px solid #333;}

Answer 5

每當您插入圖像時，它只采用圖像最初的寬度。 你可以在它旁邊添加任何其他 html 元素，你會看到它會允許它。 這使得圖像成為“內聯”元素。

Answer 6

的確，它們都是——或者更准確地說，它們是“內聯塊”元素。 這意味着它們像文本一樣內聯流動，但也像塊元素一樣具有寬度和高度。

Answer 7

<img>是被替換的元素； 默認情況下，它的顯示值為 inline，但其默認尺寸由嵌入圖像的內在值定義，就像 inline-block 一樣。 您可以在圖像上設置邊框/邊框半徑、填充/邊距、寬度、高度等屬性。

替換元素：它們是內容不受當前文檔樣式影響的元素。 使用 CSS 可以影響被替換元素的位置，但不會影響被替換元素本身的內容。

參考資料： https : //developer.mozilla.org/en-US/docs/Web/HTML/Element/img

Answer 8

被視為內聯元素，因為它允許其他元素（包括其自身）也位於同一行上。 它還可以具有一些塊功能，例如寬度和高度的樣式。 但是您可以通過將 CSS 中元素的 display 屬性設置為 'inline-block' 來更改它。 即： img {display:inline-block;}

Answer 9

表現為內聯塊元素，因為它允許同一行中的其他圖像，即內聯，我們還可以更改圖像的寬度和高度，這是塊元素的屬性。 因此，同時提供內聯元素和塊元素的特性。

Answer 10

是一個內聯元素..但是在 css 中你可以簡單地改變它：- img{display:inline-block;} 或 img{display:inline-block;} 或 img{display:inliblock;}