Stil mit {stil}

Okt 2008

HTML p • Textabsatz

Das <p>-Tag kennzeichnet den Anfang eines Absatzes (paragraph) und erzeugt einen Zeilenumbruch und eine Absatzschaltung. Es ist das Äquivalent zum Absatz in Textverarbeitungsprogrammen wie Word und in Satzprogrammen wie Quark XPress. Der Fluss der Bilder und Texte im Dokument wird unterbrochen und wird auf der nächsten Zeile fortgesetzt.

Das <p>-Tag ist ein Blockelement, aber innerhalb eines p-Tags dürfen nur Inline-Elemente wie <strong>, <span> und <img> verwendet werden. Andere Blockelemente wie div, form oder table dürfen nicht innerhalb von p-Tags liegen.

Die erste Zeile eines Absatzes weist einen höheren Durchschuss auf als die folgenden Zeilen des Absatzes und die letzte Zeile weist einen Abstand nach unten auf, so dass zwischen zwei Absätzen ein größerer Weißraum dargestellt wird. Die CSS-Eigenschaft margin regelt den Abstand zwischen zwei Absätzen.

	p { margin-top: 0; margin-bottom: 0; }

Beispiel: Bild von Text umfließen lassen

<p> <img style="float: left; margin-right: 4px;" … /> Lorem ipsum 
dolor sit amet, consectetuer adipiscing elit. … </p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. … </p>
<p style="clear: both;">Duis ligula magna, fermentum quis, …</p>

Ein Bild wird als inline-Element innerhalb des p-Elements eingesetzt. Das style-Attribut des <img>-Tags enthält die CSS-Eigenschaft float, um das Bild vom Text umfließen zu lassen. Die CSS-Eigenschaft clear im letzten p-Element beendet das Umfließen und zwingt den Text unter dem Bild am linken Rand des umfassenden Blocks anzufangen.

Darstellung

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras commodo imperdiet lectus. Morbi luctus, risus vitae convallis lacinia, libero elit mattis mi, quis lobortis lorem est ac erat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras commodo imperdiet lectus. Morbi luctus, risus vitae convallis lacinia, libero elit mattis mi, quis lobortis lorem est ac erat. Donec feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Duis ligula magna, fermentum quis, congue quis, mattis eget, lacus. Curabitur a nunc. Nam dui. Vivamus dui. Donec faucibus vulputate metus. Aenean condimentum erat id tellus. Etiam velit. Donec aliquet iaculis felis. Praesent eleifend quam ut elit. Fusce id pede. Phasellus varius. Fusce tristique.

HTML-Attribute für p

Nur Kernattribute

Kernattribute und Ereignisse für p-Elemente

Zum Seitenanfang