Inlineelemente

Das Wort "inline" ist eine Zusammensetzung aus den beiden englischen Wörtern "in" und "line" und bedeutet soviel wie "in Zeile". Genau das ist der wesentliche Aspekt bei Inlineelementen: Sie stehen im Textfluss.

Eine weitere wichtige Eigenschaft von diesen Elementen ist, dass sie ausschließlich andere Inlineelemente umschließen können, nicht aber Blockelemente. Beispielsweise dürften wir in einem <span></span> Element kein <div></div> positionieren.

Speziell bei CSS müssen wir darauf achten, dass wir einem Inlineelement keine Höhe, Breite und vertikalen Außenabstand zuweisen können. Selbst wenn wir die dazugehörigen Eigenschaften width, height, margin-top und margin-bottom setzen, würden wir keine Veränderung feststellen:

  • Html
  • Ergebnis
<!DOCTYPE html> <html> <head></head> <body> <p>Ein Text mit einem <span style="width:100px; height: 100px; margin-top: 30px; margin-bottom: 30px;"> speziellen </span> Wort.</p> </body> </html>

Im obigen Beispiel dürfen wir keine Breite und Höhe von jeweils 100px erwarten, genauso wenig wie einen Außenabstand von 30px nach oben und unten, da das Element <span></span> ein Inlineelement darstellt.

Blockelemente

Blockelemente haben zu aller erst das markante Merkmal, dass sie alle Elementen umschließen dürfen und einen Zeilenumbruch vor und nach sich ziehen. Beispielsweise können zwei Überschriften <h1></h1> und <h2></h2> ohne CSS-Anweisungen niemals nebeneinander stehen, da beide Blockelemente sind:

  • Html
  • Ergebnis
<!DOCTYPE html> <html> <head></head> <body> <h1>Eine h1-Überschrift</h1> <h2>Eine h2-Überschrift</h2> </body> </html>

Des Weiteren können wir diesen Elementen die Eigenschaften width (Breite), height (Höhe) und margin (Außenabstand) zuweisen.

Inline-Block-Elemente

Wie bereits erwähnt gibt es die zwei Element-Grundarten: inline und block. Jedoch sieht man häufig auch ein <img> in einem <span></span> Element. Da wir dem <img /> jedoch eine Breite und Höhe zuweisen können, muss es sich dabei um ein Blockelement und folglich um einen Fehler handeln, denn dieses darf nicht in einem Inlineelement stehen.

HTML und CSS haben jedoch eine hybride Art: Das Inline-Block-Element. Dieses Element kombiniert die beiden Eigenschaften der Inline- und Blockelemente, darf also im Textfluss stehen, obwohl es eine Höhe, Breite und Außenabstand nach oben und unten hat.

Eine weitere Eigenschaft von Inline-Block-Elementen ist, dass sie einen Zeilenumbruch bewirken, wenn der Platz nicht mehr ausreicht. Aus diesem Grund stellen sie eine gute Wahl für horizontale Navigationsleisten dar, denn sobald der Bildschirm kleiner wird, werden alle Elemente zwar Stück für Stück untereinander, aber immer noch vollständig angezeigt.

Elemente konvertieren

Mit CSS haben wir mit nur einer einzigen Eigenschaft die Möglichkeit jedes beliebige Element in seiner Art zu ändern:

  • Html
  • Ergebnis
<!DOCTYPE html> <html> <head></head> <body> <h1 style="display: inline;">Eine h1-Überschrift</h1> <h2 style="display: inline;">Eine h2-Überschrift</h2> </body> </html>

Das obige Beispiel zeigt die Eigenschaft display im Einsatz. Mit den Werten

  • inline
  • block
  • inline-block

können wir dem Browser bei der Anzeige mitteilen, von welcher Art das Element sein soll. Ändern wir ein Element, so gelten für dieses auch die Regeln, die es mit sich bringt.