Einführung in das CSS-Boxmodell

Das CSS-Box-Modell ist ein sehr kompliziertes Problem, insbesondere weil verschiedene Browser in der Vergangenheit etwas unterschiedliche Interpretationen hatten. Das Box-Modell beschreibt, wie die (sichtbare oder nicht sichtbare) Box um ein Element angeordnet ist und wie sich Elemente wie Ränder, Abstände und Ränder verhalten.

Inline vs. Block Elemente

Das erste und wichtigste, was Sie über das Box-Modell wissen müssen, ist der Unterschied zwischen Inline-Elementen und Blockelementen. Grundsätzlich hat jedes HTML-Element drei verschiedene Zustände: Blockieren, Inline oder Nicht angezeigt. Die letzte Gruppe ist für Tags reserviert, die vom Browser nicht visuell dargestellt werden sollen, z.B.: Meta-Tags, Style-Blöcke und so weiter.

Interessanter ist der Unterschied zwischen Inline- und Blockelementen. Ein Element auf Blockebene erstreckt sich natürlich über die gesamte verfügbare Breite. Dabei spielt es keine Rolle, wie viel horizontaler Platz tatsächlich benötigt wird. Infolgedessen verschiebt ein Blockebenenelement folgenden Inhalt automatisch in eine neue Zeile, sodass standardmäßig zwei Blockebenenelemente nicht nebeneinander stehen können - das erste verschiebt das zweite Element in die nächste Zeile (schwebende Elemente werden dies zwar erlauben, aber dazu später mehr).

Im Gegensatz zum Block-Level-Element unterbricht ein Inline-Element den Stromfluss nicht. Ein Inline-Element belegt nur den Platz, den es zum Rendern seines Inhalts benötigt. Danach können mehr Inline-Elemente angezeigt werden.

Ein guter Weg, sich an den Unterschied zu erinnern, besteht darin, sich ein Inline-Element als Text- / Satzzeile und ein Blockelement als Absatz vorzustellen. Der Satz kann zusammen mit anderen Sätzen einen ganzen Absatz bilden, der Absatz bricht jedoch das Natürliche fließen, um Raum zu schaffen.

Elemente werden entweder als unsichtbare Elemente, Inline-Elemente oder Elemente auf Blockebene geboren. Ein Beispiel für Inline-Elemente sind span-Tags (das generische Inline-Element), Links (Anker), Bilder und Formularfelder wie Eingaben. Zu den allgemeinen Elementen auf Blockebene gehören div-Tags (das generische Element auf Blockebene), Header-Tags (h1-h6), Absätze, Listen und Tabellen.

Mit all dieser Theorie möchte ich Ihnen ein einfaches Beispiel vorstellen, das den Unterschied in der Aktion zeigt:

<style type="text/css">
.box {
	background-color: Orange;
}
</style>

<div class="box">Block 1</div><div class="box">Block 2</div>
<br>
<span class="box">This is an inline element... </span><span class="box">and so is this</span>

Probieren Sie dieses Beispiel aus und stellen Sie fest, dass sich die Elemente, obwohl sie dieselbe CSS-Klasse verwenden, wie oben beschrieben völlig anders verhalten. Vor allem die div-Elemente (die standardmäßig Blockebenenelemente sind) verwenden die gesamte verfügbare Breite, während die span-Ebenenelemente (die standardmäßig Inline-Elemente sind) direkt nebeneinander stehen und Teil desselben Satzes sein können.

Inline-Elemente und Größen / Ränder

Es ist wichtig zu wissen, dass Inline-Elemente bei Verwendung der Eigenschaften margin und size (width / height) unterschiedlich wirken. Zunächst werden die Eigenschaften width und height für Inline-Elemente ignoriert. Stattdessen können Sie die Eigenschaft line-height verwenden, um ein Inline-Element zu verkleinern oder zu vergrößern, da der Abstand zwischen den einzelnen Zeilen größer oder kleiner wird.

Bei der Anwendung auf Inline-Elemente sehen Sie außerdem Ränder und Auffüllungen, die sich anders verhalten als Sie es möglicherweise gewohnt sind. Wenn Sie zwischen oder innerhalb von Elementen Platz schaffen müssen, möchten Sie möglicherweise stattdessen ein Element auf Blockebene verwenden. Wenn Sie versuchen, Inline-Elemente zu verwenden, weil zwei oder mehr Elemente nebeneinander stehen sollen, ist ein Floating-Block-Level-Element möglicherweise besser geeignet - dazu später in diesem Abschnitt des Tutorials.

Zusammenfassung

In diesem Artikel haben wir kurz erläutert, was das CSS-Box-Modell ist, und dann viel über den Unterschied zwischen Inline- und Block-Level-Elementen gesprochen. Denken Sie daran, dass einige Elemente als Inline-Elemente und andere als Elemente auf Blockebene geboren werden. Dies kann jedoch problemlos mit der display -Eigenschaft geändert werden. Diese wird später erklärt.

Wir sprachen auch über Konzepte wie Ränder, Abstände und deren Ränder. Wenn Sie mit diesen Konzepten nicht vertraut sind, machen Sie sich keine Sorgen. Sie werden in den nächsten Kapiteln ausführlich erläutert.