HTML: Block- und Inline-Elemente verstehen

Was wir bisher ignoriert haben ist der Unterschied zwischen Block und Inline-Elemente. Jedes Element in HTML ist entweder ein Block oder ein Inline-Element.

Was ist das besondere bei Block-Elementen?

Block Elemente nutzen immer die komplette Fensterbreite! Typische Blockelemente sind hier alle Überschriften wie <h1> und das Absatz-Element <p>.

Nutzen wir nur den HTML-Befehl, sieht man nicht direkt, dass auf jeden Fall die komplette Fensterbreite genutzt wird. Indirekt sieht man es, da das nächste Element darunter beginnt.

Beispielsweise bei einer kurzen Überschrift:

<h3>Beispiel Blockelement</h3>

Erst wenn jetzt über CSS noch die Hintergrundfarbe für das Element definiert, sieht man diese Blockeigenschaft:

h3 {
  background-color: yellow;
}

Was ist das besondere bei Inline-Elemente?

Wie das Wort Inline schon sagt, kommen diese innerhalb einer Line vor – oder besser zu merken: Inline-Elemente kommen innerhalb Block-Elementen vor.

Das Besondere ist: Inline-Elemente nehmen nur den Platz in Anspruch, der auch vom Inhalt benötigt wird. Auch das wird wieder über CSS und einer Hintergrundfarbe am besten sichtbar!

Typische Inline-Elemente sind beispielsweise die Hervorhebungen wie <b> und <i> bzw. Links wie <a ...

Am Beispiel von einem Link:

<a href="https://www.html-seminar.de/">HTML lernen</a>

Und nun bekommt dieser noch eine Hintergrundfarbe:

a {
  background-color: green;
}

Anmerkung am Rande: möchte man nicht alle Links mit Hintergrundfarbe, dann kann man dem Link auch eine Klasse mitgeben (siehe https://www.html-seminar.de/class_und_id.htm) und auf diese mit CSS zugreifen.

Warum nun der Aufriss mit Block- und Inline-Elementen? Warum ist es überhaupt wichtig, die Unterschiede zu kennen?

Wichtig wird das Verständnis, wenn etwas nicht mehr funktioniert. So beispielsweise bei einigen CSS-Anweisungen. Und hier kommt wieder unser Box-Modell zum Einsatz. Dieses sollte sich bei einigen CSS-Anweisungen besser Box-Block-Modell nennen. So hat beispielsweise die CSS-Anweisung height: auf Inline-Elemente keine Wirkung. Genauso auch das Ausrichten, dass beispielsweise ein Text rechts ausgerichtet wird (text-align: right;)

Ausprobieren! Sowohl mit der Höhe wie auch mit der Textausrichtung. Und immer mit Hintergrundfarben arbeiten, damit man am besten die Auswirkung sehen kann.

Und wie sieht die Lösung aus? Was tun, wenn man CSS-Anweisungen auf typische Inline-Elemente anwenden möchte?

Um das Problem in den Griff zu bekommen, dass wie alle CSS-Anweisungen auch nutzen können, gibt es den Trick mit dem Umdefinieren des Typs eines Elementes. Dabei wird die Art der Anzeige über CSS manipuliert. Über die CSS-Anweisung display können wir nun ein Element quasi „umwandeln“ (eigentlich ja nur die Art der Ausgabe display).

Hier haben wir folgende 3 üblichen CSS-Anweisungen für display:

• display: inline; (sprich wir können auch ein Block-Element wie ein Inline-Element ausgeben lassen
• display: block; (ein Inline-Element wie ein Block-Element erscheinen lassen und alle CSS-Anweisungen aus dem Box-Modell nun anwenden können
• display: inline-block; (nicht irritieren lassen, sondern testen! Ein Inline-Element auch die CSS-Anweisungen des Box-Modell anwenden können)

Die ersten 2 display-Anweisungen sind schnell ersichtlich. Die Anweisung inline-block braucht Übung bzw. ein gutes Beispiel:

Nehmen wir aus unserem Beispiel von oben den Link, den wir mit CSS beeinflussen wollen. Erst einmal ist der Link ein Inline-Element – somit zeigt bei den CSS-Anweisungen nur die Farbe eine Auswirkung. Weder das Ausrichten rechts, noch die Höhenangabe noch die Breitenangabe ist wirksam.

<a href="https://www.html-seminar.de/">HTML lernen</a>
<style>
a { 
	background-color: yellow;
	text-align: right;
	height: 100px;
	width: 300px;
}
</style>

Sobald wir das Element über display: inline-block; beeinflussen, werden auch diese CSS-Anweisungen Wirkung zeigen.

<a href="https://www.html-seminar.de/">HTML lernen</a>
<style>
a { 
    display: inline-block;
    background-color: yellow;
    text-align: right;
    height: 100px;
    width: 300px;
}
</style>

Und jetzt wird auch dieser Block innerhalb Inline verständlicher. Flapsig gesagt: es wird ein Blockelement gebildet, dass innerhalb eines Inline-Elements sitzt. Gut zu sehen anhand der Textausrichtung (text-align), die aber eine Breite (width) benötigt, um sichtbar zu werden.

Randbemerkung: Wollen wir den Link auf der rechten Fensterseite platzieren, geht das nun über das Umdefinieren oder wir packen das Inline-Element in ein Blockelement. Einfach Probieren.

Und was Weiter?

Im folgenden Kapitel nutzen wir dieses Wissen, um eine Steuerung zu erstellen, die horizontal verläuft, aber das korrekte HTML-Element der Listen verwendet:
https://www.html-seminar.de/block-elemente-und-inline-elemente.htm