·
Blockelemente beanspruchen die ganze Zeile für
sich
·
Inline-Elemente sind nur so breit wie ihr Inhalt
und ordnen sich nebeneinander an
Display-Property
Für viele HTML-Elemente sind gewisse Dinge schon
vordefiniert, die nirgends in unserem Stylesheet aufscheinen. Im Browser kann
man sich im Developer-Modus ansehen, was das für Angaben sind – eine davon ist display: block; bei Divs. Das bedeutet nichts anderes, als
dass es sich dabei um ein Block-Element handelt.
Diese Display-Property können wir auch mit CSS vergeben, und
wir können sie verändern. Aus Inline-Elementen lassen sich Blockelemente
machen, aus Blockelementen Inline-Elemente, indem man die entsprechende
Anweisung im Stylesheet vergibt.
Warum sollte man die display-property
überhaupt verändern??
Der display-property
können wir nicht nur block und inline zuordnen; auch eine Flexbox oder
ein Grid wird über display:
flex; bzw. display: grid; erstellt.
Aber auch Block- in Inline-Elemente zu verwandeln oder
umgekehrt kann manchmal Sinn machen.
Block zu Inline
Manchmal sollen Blockelemente nebeneinander angeordnet
werden, beispielsweise mehrere Textblöcke nebeneinander. Diese Textblöcke
befinden sich in Divs. Oder, ein anderer Klassiker: Beim Erstellen einer
horizontalen Navigationsleiste, die aus einer ungeordneten Liste besteht,
müssen die <li>-Elemente erst einmal dazu gebracht werden, sich
nebeneinander anzuordnen.
Besser wäre, diese Elemente mithilfe der float-property oder in einer Flexbox nebeneinander zu bringen; aber
auch über display wäre es möglich.
Eine faule, aber schnelle Variante.
Beispiel: Liste
Angenommen, wir haben eine ungeordnete Liste, die einmal zu
unserer Navigationsleiste werden soll (für dieses Beispiel werden die
Listeneinträge nicht verlinkt):
·
Home
·
Gallery
·
About Us
Die <li>-Elemente (list-items) sind Block-Elemente und nehmen somit die gesamte Breite
in Anspruch. Das sehen wir sofort, wenn wir im CSS den list-items eine Hintergrundfarbe zuweisen:
Sprechen
wir mit CSS wieder die list-items an
und setzen display: inline; , dann sind sie schon mal
nebeneinander:
Dabei gibt es aber noch 2 Probleme:
1)
Wir haben display: inline;
verwendet. Die list-items sind jetzt in-line, also in einer
Zeile/nebeneinander, aber sie sind auch so breit wie der Inhalt. Und zwar
hartnäckig so breit wie der Inhalt. Wollen wir, dass unsere späteren
Navigations-Buttons eine fixe Breite bekommen, haben wir jetzt ein Problem,
denn width, height, margin-top und margin-bottom Angaben werden von
Inline-Elementen komplett ignoriert.
2)
Zwischen den Elementen befinden sich mysteriöse
Abstände. Im Developer-Modus sieht man, dass es sich dabei NICHT um margin, also Außenabstände, handelt.
Tatsächlich kommen die Abstände daher, dass
Inline-Elemente sich so ähnlich verhalten wie Text. Diese Abstände sind
sozusagen Textabstände zwischen den Inline-Elementen, und sie kommen daher,
dass zwischen dem schließenden </li>-Tag des ersten und dem öffnenden
<li>-Tag des zweiten Eintrags ein Return im Code steht, das als Textabstand
interpretiert wird.
Der Textabstand
Wait – what?! Nein, kein Scherz. In einem
Textabschnitt wird eine beliebige Folge von Abständen, Tabstopps und Returns
als ein Textabstand interpretiert. Somit können wir einen Text im Texteditor
für die Entwickler strukturieren, ohne dass die (Auto-) Formatierung auf der
eigentlichen Seite übernommen wird. Das gilt allerdings auch für
Inline-Elemente.
Diese Returns sind die „Schuldigen“!
Und ja: würden wir alle <li>-Elemente im Code in eine
Zeile schreiben, wären die Abstände weg. Auch das schließende Tag vom ersten list-item in die nächste Zeile direkt
vor das Starttag des zweiten list-items
zu stellen und so fort, würde diese Abstände eliminieren.
Es wäre auch möglich, das Return auszukommentieren:
Das funktioniert alles, warum trotzdem nur im Konjunktiv?
Weil diese Lösungen genau so lange funktionieren, bis jemand auf
Autoformatierung klickt – und schon sind die Abstände wieder da.
Auch mit negativem Margin zu arbeiten bringt nichts – der
Textabstand kann nämlich (abhängig vom Browser) 4px oder 5px breit sein.
Möchte man also Elemente, die dicht an dicht aneinander
anschließen sollen, nebeneinander bringen, dann fällt diese Variante weg
(vorausgesetzt man möchte exakt arbeiten), und wir verwenden dafür stattdessen float oder Flexbox.
Das Problem mit der Breite: Inline-Block-Elemente
Mit der Inline-Darstellung unserer list-items haben wir noch ein Problem: die Breite. Inline-Elemente
ignorieren Breitenangaben, also müssten wir uns auch hierfür etwas anderes
einfallen lassen. Die Breite ist tatsächlich das geringere Problem, denn es
gibt eine Mischform zwischen Inline- und Block-Elementen. Diese Mischform heißt
– Überraschung! – inline-block.
Mit display: inline-block;
sorgen wir dafür, dass sich die Elemente wie Inline-Elemente verhalten, sich
also nebeneinander anordnen, gleichzeitig akzeptieren sie aber auch Breiten-
und Höhenangaben, wie Blockelemente das tun.
Trotzdem können wir wegen des Abstand-Problems diese
Variante, Elemente nebeneinander zu bringen, nur dann anwenden, wenn die
Abstände nicht exakt sein müssen.
Inline zu Block
Umgekehrt gibt es ein paar praktische Anwendungsfälle,
die schon mehr Sinn machen. Angenommen, unsere ungeordnete Liste aus dem
Beispiel oben wurde mit Hilfe von float: left; dazu
gebracht, sich nebeneinander anzuordnen. In den list-items sind nun Links (wir wollen ja zu Home, Gallery oder About Us verlinken):
Die Links bekommen ein Padding von 20px – es sollte also
sowohl seitlich, als auch oben und unten 20px Innenabstand bestehen; es wird
aber nur der seitliche Abstand berücksichtigt (die Links sind hier rot
hinterlegt, die <ul> grün):
