CSS DIV und CSS Span

CSS Tutorial > CSS Div und CSS Span

Div

Div (kurz für Division) teilt den Inhalt in einzelne Abschnitte. Jeder Abschnitt kann seinen eigenen Format, der durch CSS bestimmt wird, haben. Div ist ein Block-Level-Element, dies bedeutet, dass es eine neue Zeile nach dem </div>-Tag gibt.

Wenn wir zum Beispiel das folgende CSS-Statement haben:

.large {
color: #00FF00;
font-family:arial;
font-size: 4pt;
}

Der HTML-Code:

<div class="large">
Dies ist ein Beispiel zu DIV.
</div>

sieht dann so aus:

Dies ist ein Beispiel zu DIV.

Span

Span ähnelt Div, da beide Inhalte in einzelne Abschnitte unterteilen. Der Unterschied ist aber, dass Span eine feinere Unterteilung erlaubt, wir können so zum Beispiel ein einzelnes Zeichen formatieren, wenn wir dies möchten. Es gibt keine neue Zeile hinter dem </span>-Tag.

Wenn wir zum Beispiel das folgende CSS-Statement haben:

.largefont {
color: #0066FF;
font-family:arial;
font-size: 6px;
}

Sieht der HTML-Code:

Span ist kein <span class="largefont">Block-Level-Element</span>.

dann so aus:

Span ist kein Block-Level-Element.

Folgende Seite: CSS Längeneinheiten