Inhalt auf Inline-Ebene

In CSS wird Inhalt, der am Inline-Layout beteiligt ist, als Inhalt auf Inline-Ebene bezeichnet. Die meisten Textsequenzen, ersetzte Elemente und generierter Inhalt sind standardmäßig auf Inline-Ebene.

Im Inline-Layout wird ein gemischter Strom aus Text, ersetzten Elementen und anderen Inline-Boxen aufgebaut, indem sie in einen Stapel von Linienboxen fragmentiert werden. Innerhalb jeder Linienbox werden Inline-Boxen vertikal oder horizontal, abhängig vom Schreibmodus, miteinander ausgerichtet. Typischerweise werden sie an den Grundlinien ihres Textes ausgerichtet. Dies kann mit CSS verändert werden.

[画像:Inline-Layout]

Beispiele

<p>
 This span is an <span class="highlight">inline-level element</span>; its
 background has been colored to display both the beginning and end of the
 element's influence. Input elements, like <input type="radio" /> and
 <input type="checkbox" />, are also inline-level content.
</p>

In diesem Beispiel enthält das <p>-Element etwas Text. Innerhalb dieses Textes befindet sich ein <span>-Element und zwei <input>-Elemente, die Inline-Elemente sind. Wenn das <span> über zwei Zeilen verteilt ist, werden zwei Linienboxen generiert. Da diese Elemente inline sind, wird der Absatz korrekt als einzelner Absatz mit ununterbrochenem Textfluss dargestellt:

body {
 margin: 0;
 padding: 4px;
 border: 1px solid #333333;
}
.highlight {
 background-color: #eeee33;
}

Siehe auch

• Verwandte Glossarbegriffe:
  • Inhalt auf Block-Ebene
• Inline-Formatierungskontext
• display