Erste Layouts

Unterscheide Block-Elemente von Inline-Elementen und lerne die klassischen Techniken, um ein Element zu zentrieren.

10 Min. · 3 Fragen

Wie ordnen sich Boxen auf der Seite an? Das hängt ganz von ihrem Anzeigemodus ab, gesteuert durch die Eigenschaft display. Ein Block-Element verhält sich wie ein Ziegelstein: Es nimmt die volle verfügbare Breite ein und drückt das nächste Element in eine neue Zeile. Überschriften <h1>, Absätze <p> und <div>-Tags (generische Boxen ohne besondere Bedeutung) sind standardmäßig Block. Ein Inline-Element verhält sich wie ein Wort in einem Satz: Es nimmt nur den Platz seines Inhalts ein und sitzt neben seinen Nachbarn. Links <a> und <span>-Tags (das Inline-Gegenstück zu <div>) sind standardmäßig Inline.

<p>A paragraph: I take up the full width.</p>
<p>Me too, so I start on a new line.</p>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<span>A span, also on the same line.</span>

Die Eigenschaft display lässt dich dieses Verhalten ändern: display: block; an einem Link lässt ihn die volle Breite einnehmen, display: inline; an einem <div> lässt es im Text mitfließen. Achte auf eine wichtige Einschränkung von Inline-Elementen: Die Eigenschaften width und height werden bei ihnen ignoriert. Damit ein Element eine Größe bekommt, muss es Block sein.

a {
  display: block;
  width: 200px;
  background-color: lightblue;
}

Weiter zum Zentrieren, der Frage, die jeder Anfänger stellt. Erster Fall: Text zentrieren innerhalb einer Box. Die Eigenschaft text-align: center; wird auf den Container angewendet und zentriert seinen Inline-Inhalt (Text, Links, Bilder). Zweiter Fall: eine ganze Block-Box zentrieren, etwa eine Karte in der Mitte der Seite. Die klassische Technik: Gib der Box eine Breite und schreibe dann margin: 0 auto;. Der Wert auto bittet den Browser, den linken und rechten Außenabstand selbst zu berechnen: Er macht sie gleich groß, was die Box zentriert.

.card {
  width: 300px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid gray;
  padding: 16px;
}

Fassen wir zusammen, was du in diesem Modul gelernt hast: Du weißt, wie man eine CSS-Datei einbindet, Regeln mit Selektoren, Eigenschaften und Werten schreibt, Elemente per Tag, Klasse oder ID anspricht, padding, border und margin ausbalanciert, Text gestaltet und jetzt Boxen anordnet und zentriert. Mit diesen Grundlagen kannst du schon eine einfache, saubere Webseite bauen. Das nächste Modul führt dich an mächtigere Layout-Werkzeuge heran.

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

1. Was ist der Unterschied zwischen einem Block-Element und einem Inline-Element?
   • Ein Block kann keinen Text enthalten, ein Inline schon
   • Ein Block nimmt die volle Breite ein und beginnt eine neue Zeile, ein Inline bleibt im Textfluss
   • Ein Inline ist immer größer als ein Block
2. Wie zentrierst du eine 300 px breite Block-Box horizontal?
   • text-align: center; an der Box selbst
   • margin: 0 auto; mit einer definierten Breite
   • padding: auto; an der Box
3. Warum hat width: 200px; standardmäßig keine Wirkung auf ein <span>?
   • Weil spans alle CSS-Eigenschaften ablehnen
   • Weil 200 px die maximale Größe eines span überschreitet
   • Weil ein span Inline ist und width bei Inline-Elementen ignoriert wird