Ist <img> Elementblock- oder Inline-Ebene?

163

Ich habe irgendwo gelesen, dass sich dieses <img>Element wie beides verhält. Wenn ja, könnte jemand dies bitte anhand von Beispielen erklären?

html css image Understack
quelle

Antworten:

189

Es ist wahr, sie sind beide - oder genauer gesagt, sie sind "Inline-Block" -Elemente. Dies bedeutet, dass sie wie Text inline fließen, aber auch eine Breite und Höhe wie Blockelemente haben.

In CSS können Sie ein Element auf festlegen display: inline-block , damit es das Verhalten von Bildern * repliziert.

Bilder und Objekte werden auch als "ersetzte" Elemente bezeichnet, da sie an sich keinen Inhalt haben, wird das Element im Wesentlichen durch Binärdaten ersetzt.

* Beachten Sie, dass Browser technisch verwenden display: inline(wie in den Entwicklertools zu sehen), Bilder jedoch besonders behandeln. Sie folgen immer noch allen Merkmalen von inline-block.

DisgruntledGoat
quelle
Ich habe immer gelesen, dass Bilder Inline-Elemente sind, keine Inline-Blöcke, aber es ist sinnvoll, dass sie Inline-Blöcke sind, da Breite und Höhe hinzugefügt werden können.
Donato
22
Diese Antwort ist technisch nicht korrekt. Genau genommen sind imgElemente keine, inline-blocksondern tatsächliche inlineElemente. Sie können dies in einem modernen Browser überprüfen, indem Sie mit der rechten Maustaste auf ein Bild klicken, auf "Element überprüfen" klicken und dann den berechneten Stil anzeigen, der angezeigt wird display: inline. Innerhalb des Tags findet kein Blockkontext statt, daher ist es nicht korrekt, ihn aufzurufen inline-block. Weitere Informationen zu ersetzten Inline-Elementen finden Sie in der Antwort von Quentin und in diesem MDN-Artikel .
Maximillian Laumeister
@Max dieser Link sagt nichts darüber aus, dass ersetzte Elemente inline sind.
DisgruntledGoat
@DisgruntledGoat Der von mir gepostete Link besagt nicht, dass imgElemente inline sind. Die Google Chrome-Entwicklungstools zeigen imgElemente als inline an. Dieser Beitrag ist der einzige Ort, den ich bisher gefunden habe, der besagt, dass sie inline-blockstattdessen sind. Interessanterweise habe ich keine Autorität gefunden, die besagt, dass dies auch der inlineFall ist. Ist die Behandlung des Tags möglicherweise abhängig von der Implementierung?
Maximillian Laumeister
2
@Max Nach dieser , ersetzte Elemente außerhalb des Bereichs des CSS - Formatierungsmodell sind. Nichts in den HTML- oder CSS-Spezifikationen gibt an, dass Bilder inline sind. Unabhängig davon, was der Browser sagt, werden Bilder genau so behandelt, wie sie eingestellt wurden display:inline-block.
DisgruntledGoat
53

Ein imgElement ist ein ersetztes Inline-Element .

Es verhält sich wie ein Inline-Element (weil es so ist), aber einige Verallgemeinerungen über Inline-Elemente gelten nicht für imgElemente.

z.B

Verallgemeinerung: "Breite gilt nicht für Inline-Elemente"

Was die Spezifikation tatsächlich sagt : "Gilt für: alle Elemente außer nicht ersetzten Inline-Elementen, Tabellenzeilen und Zeilengruppen"

Da ein Bild ein ersetztes Inline-Element ist, gilt es.

QUentin
quelle
13

IMG-Elemente sind inline, dh, wenn sie nicht schwebend sind, fließen sie horizontal mit Text und anderen Inline-Elementen.

Sie sind "Block" -Elemente, da sie eine Breite und eine Höhe haben. Aber sie verhalten sich in dieser Hinsicht eher wie "Inline-Block".

Robusto
quelle
7

Stellen Sie sie sich für fast alle Zwecke als Inline-Element mit einer festgelegten Breite vor. Grundsätzlich können Sie frei bestimmen, wie Bilder mit CSS angezeigt werden sollen. Im Allgemeinen habe ich einige Bildklassen wie folgt festgelegt:

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;}
Montana Flynn
quelle
2

Wann immer Sie ein Bild einfügen, nimmt es nur die Breite an, die das Bild ursprünglich hat. Sie können jedes andere HTML-Element daneben hinzufügen, und Sie werden sehen, dass es dies zulässt. Das macht das Bild zu einem "Inline" -Element.

Benutzerbild
quelle
0

Es ist wahr, sie sind beide - oder genauer gesagt, sie sind "Inline-Block" -Elemente. Dies bedeutet, dass sie wie Text inline fließen, aber auch eine Breite und Höhe wie Blockelemente haben.

Modaser Sadat
quelle