Seitenstruktur: Block- und Inline-Elemente


In meinen Kursen werde ich auch von erfahreneren Developern oft nach Block- und Inline-Elementen gefragt. Oft stellt sich heraus, dass man zwar so irgendwie damit klargekommen ist, sich aber nie mit dem Prinzip dahinter beschäftigt hat.

Schon klar, Theorie ist langweiliger, als einfach mal so drauflos zu designen. Herumprobieren, bis es dann so aussieht, wie man es sich vorgestellt hat.

Das funktioniert aber nur bis zu einem gewissen Punkt. Irgendwann landet man da, wo man sich fragt, warum sich die Elemente auf der Seite so gar nicht so verhalten, wie man es denn gerne von ihnen hätte. Und wo man feststellen muss, dass man sich Stunden, Tage oder Wochen an Quälerei hätte ersparen können, wenn man sich mit ein paar simplen Grundprinzipien auseinandergesetzt hätte.

Mit einem solchen simplen, aber stark vernachlässigten Grundprinzip beschäftigen wir uns in diesem Artikel.

 

Blockelemente

Blockelemente, oder block-level elements, haben Eigenschaften, die sich massiv auf die Struktur der Seite auswirken. Daher werden einige von ihnen auch zur Strukturierung der Seiten verwendet. Bestimmt ist das <div>-Tag schon bekannt? Div steht kurz für division, also einen Abschnitt. Und ja, ein <div> ist ein Blockelement, vermutlich das bekannteste aller Blockelemente.

Jedes Blockelement beginnt in einer eigenen Zeile und nimmt in der Breite so viel Platz in Anspruch, wie es das übergeordnete Element zulässt. Oder mit anderen Worten: es ist grundsätzlich so breit wie die Seite; aber wenn es in einem anderen Element verpackt ist, beispielsweise einem anderen Div, dann kann es nur so breit werden, wie die Verpackung.

Andere bekannte Blockelemente sind beispielsweise <table>, <ul>, <ol> und die mit HTML5 neu hinzugekommenen semantischen Elemente <section>, <article>, <header>, <footer> und <aside>.

 

Inline-Elemente

Inline-Elemente hingegen verhalten sich im Grunde so wie Text. Sie ordnen sich nebeneinander, also in-line, in einer Zeile, an, und zwar so viele nebeneinander, wie sich eben in einer Zeile ausgehen. Hat eines keinen Platz mehr in der Zeile, springt es in die nächste, genauso, wie Worte in einem Text.

Inline-Elemente brauchen wir immer dann, wenn wir nicht wollen, dass der Textfluss unterbrochen wird; bei einem <a>-Tag, also einem Link, handelt es sich um ein Inline-Element. Wir wollen schließlich nicht, dass jeder Link in einer eigenen Zeile steht und die gesamte Breite der Zeile für sich beansprucht, wie das ein Blockelement tun würde, sondern der Link soll genau da bleiben, wo er im Textfluss vorkommt.

Andere bekannte Inline-Elemente sind zum Beispiel <span>, <label>, <input>, <button> und auch <img>.

 

Wo liegt dann das Problem?

Was, das wars schon? Hm, grundsätzlich schon. Es wird natürlich noch ein bisschen komplexer. Aber für den Anfang reicht es schon, sich zu merken:


·        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):




<a>-Tags (also Links) sind Inline-Elemente. Damit sie auch oben und unten breiter werden, müssen wir Block- oder Inline-Block-Elemente daraus machen:



Bitteschön: oben und unten 20px.

Auch in einem weiteren Fall kann es wichtig sein, aus einem Inline- ein Blockelement zu machen: bei Images.

 

Img füllt den Container nicht aus

Eine Frage, auf die man auch im Netz immer wieder stößt, ist: „Unter meinem img ist ein Abstand, von dem ich nicht weiß, wo er herkommt, wie bekomme ich den weg?“

Ein Beispiel:

Ein <img> innerhalb eines Divs – das div hat einen roten Rahmen:




Hier haben wir wieder das Problem, dass bei Inline-Elementen der Textabstand hineininterpretiert wird – also auch bei einem <img>!

Um dieses Problem zu lösen, reicht es, dem <img> zu sagen, es sei nun ein Blockelement: display: block;




Problem gelöst, der unerwünschte Abstand ist weg.

 

Fazit

Viele Probleme lassen sich lösen oder gar vermeiden, wenn man sich mit einigen dieser simplen Grundprinzipien befasst. Hier noch einmal eine kurze Zusammenfassung:

·        Blockelemente beanspruchen eine gesamte Zeile für sich (auch, wenn genug Platz für mehr wäre)

·        Inline-Elemente sind sturköpfig nur so breit wie ihr Inhalt und nehmen auch keine Breitenangaben an

·        Inline-Block-Elemente sind eine Mischform zwischen Block- und Inline-Elementen, die sich verhalten, wie Inline-Elemente, aber, wie Blockelemente, auch Breiten- und Höhenangaben annehmen

 

Mehr dazu gibt’s in unseren Kursen – vielleicht sehen wir uns ja dort!

Viel Spaß beim Herumexperimentieren mit Block- und Inline-Elementen!




Kommentare sind geschlossen