Bei der Arbeit mit HTML und CSS können Block, Inline und Inline-Block verwirrend sein. Nachfolgend finden Sie Beispiele für jedes Attribut, um ein besseres Verständnis für die Funktionsweise der einzelnen Attribute zu vermitteln.
CSS-Anzeige: Inline
In unserem ersten Beispiel verwenden wir ein -Tag, das standardmäßig ein Inline-Element ist. Im Beispiel unten ist der Text rot, wie es das style-Attribut in den -Tags vorschreibt. Diese Methode ist eine Möglichkeit, ein paar Wörter oder einen Satz mit CSS rot zu machen.
HTML Quelltext:
<span style="color:red;">span text</span>
CSS-Anzeige: block
Im nächsten Beispiel haben wir die Standardeinstellung des -Tags so geändert, dass es als Block angezeigt wird. Da ein Blockelement eine eigene Zeile belegt, sieht es so aus, als ob in unserem Beispiel nach „how“ und „text“ eine Eingabe- oder Eingabetaste gedrückt wurde.
Beispieltext, um ein Beispiel für die Herstellung zu geben Text überspannen inline-, block- oder inline-block-Element und wie es das Erscheinungsbild von Text verändert.
HTML Quelltext:
<span style="color:red; display: block;">span text</span>
CSS-Anzeige: Inline-Block
Schließlich haben wir im nächsten Beispiel den Standardwert des -Tags so geändert, dass er als Inline-Block angezeigt wird. Im Gegensatz zu einem Blockelement bleibt ein Inline-Block mit dem gesamten Text um das Element herum inline und erscheint genauso wie ein Inline-Element.
Beispieltext, um ein Beispiel für die Herstellung zu geben Text überspannen inline-, block- oder inline-block-Element und wie es das Erscheinungsbild von Text verändert.
HTML Quelltext:
<span style="color:red; display: inline-block;">span text</span>
Warum sollte ich einen Inline-Block anstelle von Inline verwenden?
Nachdem Sie sich die obigen Beispiele angesehen haben, fragen Sie sich vielleicht sofort, warum ich ein Block- oder Inline-Block-Element verwenden möchte? Indem Sie ein Element zu einem Blockelement machen, erhalten Sie die Möglichkeit, eine vertikale Höhe zu diesem Element zu haben, wie unten gezeigt.
Inline-Spannweite mit Höhe
Beispieltext, um ein Beispiel für die Herstellung zu geben Text überspannen inline-, block- oder inline-block-Element und wie es das Erscheinungsbild von Text verändert.
HTML Quelltext:
<span style="color:red; background-color:yellow; height:60px;">span text</span>
Inline-Blockspanne mit Höhe
Beispieltext, um ein Beispiel für die Herstellung zu geben Text überspannen inline-, block- oder inline-block-Element und wie es das Erscheinungsbild von Text verändert.
HTML Quelltext:
<span style="color:red; background-color:yellow; display: inline-block; height:60px;">span text</span>
