Inline-Elemente

In CSS wird Inhalt, der am Inline-Layout teilnimmt, als Inline-Inhalt bezeichnet. Die meisten Textsequenzen, ersetzte Elemente und generierte Inhalte sind standardmäßig Inline-Inhalt.

Im Inline-Layout wird ein gemischter Datenstrom aus Text, ersetzten Elementen und anderen Inline-Boxen so layoutet, dass sie in Fragmente zerlegt zu einer Stapelung von Zeilenboxen werden. Innerhalb jeder Zeilenbox sind die Inline-Boxen vertikal oder horizontal aneinander ausgerichtet, abhängig vom Schreibmodus. Typischerweise sind sie an den Grundlinien ihres Textes ausgerichtet. Dies kann mit CSS geändert werden.

<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>

body {
  margin: 0;
  padding: 4px;
  border: 1px solid #333;
}

.highlight {
  background-color: #ee3;
}