CSS: Größe und Orientierung
Auf dieser Seite werden die wichtigsten CSS-Eigenschaften vorgestellt, mit denen vor allem HTML-Blockelement wie Textabsätze oder <div>-Container formatiert werden können. Mit ihnen lassen sich z. B. die Element-Größe und die Orientierung des Inhalts sowie die Art eines möglichen Zeilenumbruchs innerhalb eines Elements festlegen. Auch ist es z. B. möglich, Text um eine Grafik herumfließen zu lassen und dieses Verhalten schließlich wieder zu beenden.
Breite und Höhe – width, height
Über die Eigenschaften width (Breite) und height (Höhe) lässt sich die Ausdehnung eines Elements in horizontaler und vertikaler Richtung einstellen. Dies gilt nicht nur für normale Blockelemente wie <div> und <p>, sondern auch beispielsweise für Formularfelder und so weiter.
Wird kein Wert angegeben, so entspricht die Breite bei Blockelementen in der Regel 100 % des Elternelements, bei Formularfeldern dem browserspezifischen Stylesheet. Die Höhe richtet sich nach dem Platzbedarf des Inhalts. Wird bei einem Absatz die Breite festgelegt, so wird enthaltener Text entsprechend umgebrochen. Wird die Höhe festgelegt, so ragt Inhalt mit mehr Platzbedarf über das Element hinaus (siehe drittes Beispiel unten), es sei denn eine andere Regel wurde mit der Eigenschaft overflow festgelegt.
Werte können in den üblichen Einheiten (px, pt, em) oder in Prozent angegeben werden. Der neutrale Wert ist auto.
Hier ein paar Beispiele:
<p style='width:300px;'>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p style='height:100px;'>Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p style='width:300px;height:100px;'>Sed diam nonumy eirmod tempor. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
Dieser Code führt zu folgender Darstellung:
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Sed diam nonumy eirmod tempor. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.
Mindestbreite und -höhe – min-width, min-height
Maximalbreite und -höhe – max-width, max-height
Die Eigenschaften min-width (Mindestbreite) und min-height (Mindesthöhe) verhalten sich ähnlich wie die Eigenschaften width und height, mit dem Unterschied, dass die angegebene Größe des Elements nur solange eingehalten wird, wie der vorhandene Platz für enthaltene Elemente ausreichend ist. Sollte der Platzbedarf größer sein, so wird das Element im Gegensatz zu width und height ausgedehnt.
Man beachte, dass die Eigenschaft min-height auf Tabellen, Tabellenzeilen oder Tabellenzellen angewendet bislang ausschließlich vom Internet Explorer ab Version 8 in diesem Sinne interpretiert wird.
Mit den Eigenschaften max-width (Maximalbreite) und max-height (Maximalhöhe) verhält es sich genau umgekehrt. Hier wird das Element grundsätzlich an den Platzbedarf des Inhalts angepasst und bei Bedarf nur maximal bis zu dem angegebenen Wert ausgedehnt. Passt der Inhalt nicht in das Element, so ragt er über das Element hinaus, es sei denn eine andere Regel wurde mit der Eigenschaft overflow festgelegt.
Hier ein paar Beispiele:
<table><tr><td style='min-width:180px;'>Lorem ipsum.</td></tr></table>
<table><tr><td style='min-width:180px;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</td></tr></table>
<p style='min-height:50px;'>Consetetur sadipscing elitr.</p>
<p style='min-height:50px;'>Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<table><tr><td style='max-width:180px;white-space:nowrap;'>Lorem ipsum.</td></tr></table>
<table><tr><td style='max-width:180px;white-space:nowrap;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</td></tr></table>
<p style='max-height:50px;'>Consetetur sadipscing elitr.</p>
<p style='max-height:50px;'>Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>
Dieser Code führt zu folgender Darstellung:
Lorem ipsum. |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr. |
Consetetur sadipscing elitr.
Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum. |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr. |
Consetetur sadipscing elitr.
Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.
Überlauf – overflow, text-overflow
Über die Eigenschaft overflow lässt sich einstellen, wie verfahren werden soll, wenn Kindelemente mehr Platz benötigen, als im Elternelement vorhanden ist. Mögliche Werte sind:
• hidden – nicht sichtbar
• visible – sichtbar
• auto – Scrollbalken nur bei Bedarf
• scroll – sichtbar mit Scrollbalken
Der angegebene Wert gilt für die horizontale und die vertikale Richtung. Mit overflow-x und overflow-y können die Angaben für beide Richtungen individuell gemacht werden.
Hier ein paar Beispiele:
<p style='overflow:hidden;white-space:nowrap;width:400px;'>Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>
<p style='overflow:visible;white-space:nowrap;width:400px;'>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
<p style='overflow:auto;white-space:nowrap;width:400px;'>Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>
<p style='overflow:scroll;white-space:nowrap;width:400px;'>Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
Dieser Code führt zu folgender Darstellung:
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.
Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Mit text-overflow kann festgelegt werden, ob der Überfluss besonders gekennzeichnet wird.
• clip – Text wird abgeschnitten
• ellipsis – Text endet mit …-Zeichen
• "***" – Text endet benutzerdefiniert (nur Firefox)
<p style='text-overflow:clip;margin-bottom:5px;background-color:black;overflow:hidden;width:500px;'>Loremipsumdolorsitametconsetetursadipscingelitrseddiamnonumyeirmod temporinviduntutlaboreetdoloremagnaaliquyameratseddiamvoluptua.</p>
<p style='text-overflow:ellipsis;margin-bottom:5px;background-color:black;overflow:hidden;width:500px;'>Loremipsumdolorsitametconsetetursadipscingelitrseddiamnonumyeirmod temporinviduntutlaboreetdoloremagnaaliquyameratseddiamvoluptua.</p>
<p style='text-overflow:"***";margin-bottom:5px;background-color:black;overflow:hidden;width:500px;'>Loremipsumdolorsitametconsetetursadipscingelitrseddiamnonumyeirmod temporinviduntutlaboreetdoloremagnaaliquyameratseddiamvoluptua.</p>
Dieser Code führt zu folgender Darstellung:
Mit overflow-wrap lässt sich festlegen, wie mit überlangen Worten umgegangen werden soll, wenn das Elternelement nicht genügend Platz zur Verfügung stellt. word-wrap ist ein Alias für diese Eigenschaft.
• normal – Das Wort wird nicht umgebrochen.
• break-word – Das Wort wird umgebrochen.
<p style='overflow-wrap:normal;overflow:scroll;margin-bottom:5px;background-color:black;width:500px;height:150px;'>Loremipsumdolorsitametconsetetursadipscingelitrseddiamnonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p style='overflow-wrap:break-word;overflow:scroll;margin-bottom:5px;background-color:black;width:500px;height:150px;'>Loremipsumdolorsitametconsetetursadipscingelitrseddiamnonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
Dieser Code führt zu folgender Darstellung (außer bei Firefox ≤ 33):
Loremipsumdolorsitametconsetetursadipscingelitrseddiamnonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Loremipsumdolorsitametconsetetursadipscingelitrseddiamnonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Außenabstand – margin
Über die Eigenschaft margin lässt sich der Außenabstand eines Elements zu seinen Nachbarelementen einstellen. Werte können in den üblichen Einheiten (px, pt, em) oder in Prozent angegeben werden. Der neutrale Wert ist auto.
Wird nur ein Wert angegeben, so gilt dieser gleichermaßen für oben, unten, links und rechts. Werden zwei Werte angegeben, so gilt der erste für oben und unten, und der zweite für links und rechts. Werden drei Werte angegeben, so gilt der erste für oben, der zweite für links und rechts, und der dritte für unten. Werden vier Werte angegeben, so gelten diese in der Reihenfolge für oben, rechts, unten und links.
Die Abstände können auch einzeln angegeben werden:
• margin-top – Abstand oben
• margin-bottom – Abstand unten
• margin-left – Abstand links
• margin-right – Abstand rechts
Mit negativen Werten lassen sich Elemente in die entsprechende Richtung ›ziehen‹, so dass sie das Nachbarelement überlappen.
Hier ein paar Beispiele:
<p style='margin-left:100px;margin-right:200px;'>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
<p style='margin-top:50px;'>Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p style='margin:-40px 100px 20px;'>Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>
Dieser Code führt zu folgender Darstellung:
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.
Innenabstand – padding
Über die Eigenschaft padding lässt sich der Innenabstand eines Elements zwischen Außenrand des Elements und Außenrand des Elementinhaltes einstellen (sog. ›Auffüllung‹). Werte können in den üblichen Einheiten (px, pt, em) oder in Prozent angegeben werden.
Wird nur ein Wert angegeben, so gilt dieser gleichermaßen für oben, unten, links und rechts. Werden zwei Werte angegeben, so gilt der erste für oben und unten, und der zweite für links und rechts. Werden drei Werte angegeben, so gilt der erste für oben, der zweite für links und rechts, und der dritte für unten. Werden vier Werte angegeben, so gelten diese in der Reihenfolge für oben, rechts, unten und links.
Die Abstände können auch einzeln angegeben werden:
• padding-top – Abstand oben
• padding-bottom – Abstand unten
• padding-left – Abstand links
• padding-right – Abstand rechts
Hier ein paar Beispiele:
<p style='padding:0;'>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
<p style='padding:20px;'>Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p style='padding:5px 90px;'>Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.</p>
Dieser Code führt zu folgender Darstellung:
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.
Leerzeichen / Zeilenumbruch – white-space
Über die Eigenschaft white-space lässt sich die Behandlung von benachbarten Leerzeichen steuern und ob an einem Leerzeichen bei Bedarf ein Zeilenumbruch stattfinden soll bzw. darf.
Die folgende Tabelle soll die Bedeutung der möglichen Werte wiedergeben:
1 – benachbarte Leerzeichen im Quelltext werden zu einem zusammengefasst
2 – Zeilenumbruch bei mangelndem Platz
3 – Zeilenumbruch bei neuer Zeile im Quelltext
Wert | 1 | 2 | 3 |
normal | • | • | |
nowrap | • | ||
pre | • | ||
pre-wrap | • | • | |
pre-line | • | • | • |
Die Werte pre-wrap und pre-line werden vom MSIE erst ab Version 8 unterstützt.
Hier ein paar Beispiele. Man beachte vor allem, wie sich der Zeilenumbruch im Quelltext nach dem öffnenden <p>-Tag sowie die Leerzeichen vor dem schließenden </p>-Tag auswirken:
<p style='white-space:normal;width:300px;'>
•Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
• sed diam nonumy eirmod tempor invidunt ut labore et dolore.
</p>
<p style='white-space:nowrap;width:300px;'>
•Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
• sed diam nonumy eirmod tempor invidunt ut labore et dolore.
</p>
<p style='white-space:pre;width:300px;'>
•Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
• sed diam nonumy eirmod tempor invidunt ut labore et dolore.
</p>
<p style='white-space:pre-wrap;width:300px;'>
•Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
• sed diam nonumy eirmod tempor invidunt ut labore et dolore.
</p>
<p style='white-space:pre-line;width:300px;padding:20px;background-color:#333;'>
•Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
• sed diam nonumy eirmod tempor invidunt ut labore et dolore.
</p>
Dieser Code führt zu folgender Darstellung:
•Lorem ipsum dolor sit amet, consetetur sadipscing elitr, • sed diam nonumy eirmod tempor invidunt ut labore et dolore.
•Lorem ipsum dolor sit amet, consetetur sadipscing elitr, • sed diam nonumy eirmod tempor invidunt ut labore et dolore.
•Lorem ipsum dolor sit amet, consetetur sadipscing elitr, • sed diam nonumy eirmod tempor invidunt ut labore et dolore.
•Lorem ipsum dolor sit amet, consetetur sadipscing elitr, • sed diam nonumy eirmod tempor invidunt ut labore et dolore.
•Lorem ipsum dolor sit amet, consetetur sadipscing elitr, • sed diam nonumy eirmod tempor invidunt ut labore et dolore.
Anzeige – display
Über die Eigenschaft display lässt sich der Darstellungsmodus eines Elements manipulieren. Mögliche Werte sind unter anderem:
• none – Element nicht anzeigen
• inline – Element als Inline-Element darstellen
• block – Element als Block-Element darstellen
Hier ein paar Beispiele:
<!-- Dieses Element wird gar nicht angezeigt: -->
<p style='display:none;'>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
<!-- Obwohl <span> ein Inline-Element ist, wird es behandelt wie ein eigener Absatz: -->
<p>
<span style='display:block;'>Consetetur sadipscing elitr.</span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
</p>
<!-- <form> erzwingt ein inneres Blockelement, dadurch gerät das Formular aus dem Layout: -->
<div>
Gib deinen Namen ein:
<form action='./?257#678' method='post'>
<div><input type='text' name='eingabe'></div>
</form>
</div>
<!-- display:inline macht aus Block-Elementen Inline-Elemente: -->
<div>
Gib deinen Namen ein:
<form style='display:inline;' action='./?257#678' method='post'>
<div style='display:inline;'><input type='text' name='eingabe'></div>
</form>
</div>
<!-- Ein Absatz, aber kein Block: -->
<p style='display:inline;background-color:#333;'>Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.</p>
Dieser Code führt zu folgender Darstellung:
Consetetur sadipscing elitr.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.
Umfließen – float, clear
Über die Eigenschaft float lässt sich einstellen, ob ein Element von nachfolgenden Elementen umflossen werden soll, und wenn ja, auf welcher Seite es sich dann befindet. Mögliche Werte sind:
• none – Element wird nicht umflossen
• left – Element befindet sich links vom Umfluss
• right – Element befindet sich rechts vom Umfluss
Mit der Eigenschaft clear lässt sich dieses Verhalten wieder aufheben. Mögliche Werte außer none sind:
• both – float:left und float:right wird aufgehoben
• left – float:left wird aufgehoben
• right – float:right wird aufgehoben
Hier ein paar Beispiele:
<p style='width:300px;float:right;'><b>Ich bin das erste Element und befinde mich auf der rechten Seite. Alle folgenden Elemente befinden sich links neben mir und sind schmaler, bis der Platz ausreicht.</b> Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur.</p>
<p><b>Ich bin das zweite Element und bin schmaler, da der Platz vom ersten Element belegt ist.</b> Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet.</p>
<p><b>Ich bin das dritte Element und kann erst dann wieder die volle Breite nutzen, wenn mir das erste Element Platz macht.</b> Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore. Sed diam nonumy eirmod tempor invidunt.</p>
<p style='width:300px;float:right;'><b>Ich bin das erste Element und befinde mich auf der rechten Seite. Alle folgenden Elemente befinden sich links neben mir und sind schmaler, bis der Platz ausreicht.</b> Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur.</p>
<p><b>Ich bin das zweite Element und bin schmaler, da der Platz vom ersten Element belegt ist.</b> Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet.</p>
<p style='clear:left;'><b>Ich bin das dritte Element und meine Eigenschaft <samp>clear:left;</samp> hat hier keine Wirkung, da das erste Element die Eigenschaft <samp>float:right</samp> hat.</b> Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore. Sed diam nonumy eirmod tempor invidunt.</p>
<p style='width:300px;float:right;'><b>Ich bin das erste Element und befinde mich auf der rechten Seite. Alle folgenden Elemente befinden sich links neben mir und sind schmaler, bis der Platz ausreicht.</b> Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur.</p>
<p><b>Ich bin das zweite Element und bin schmaler, da der Platz vom ersten Element belegt ist.</b> Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet.</p>
<p style='clear:right;'><b>Erst durch <samp>clear:right;</samp> wird <samp>float:right;</samp> aufgehoben, und ich beginne daher wieder unterhalb des ersten Elements.</b> Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore. Sed diam nonumy eirmod tempor invidunt.</p>
Dieser Code führt zu folgender Darstellung:
Ich bin das erste Element und befinde mich auf der rechten Seite. Alle folgenden Elemente befinden sich links neben mir und sind schmaler, bis der Platz ausreicht. Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur.
Ich bin das zweite Element und bin schmaler, da der Platz vom ersten Element belegt ist. Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet.
Ich bin das dritte Element und kann erst dann wieder die volle Breite nutzen, wenn mir das erste Element Platz macht. Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore. Sed diam nonumy eirmod tempor invidunt.
Ich bin das erste Element und befinde mich auf der rechten Seite. Alle folgenden Elemente befinden sich links neben mir und sind schmaler, bis der Platz ausreicht. Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur.
Ich bin das zweite Element und bin schmaler, da der Platz vom ersten Element belegt ist. Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet.
Ich bin das dritte Element und meine Eigenschaft clear:left; hat hier keine Wirkung, da das erste Element die Eigenschaft float:right hat. Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore. Sed diam nonumy eirmod tempor invidunt.
Ich bin das erste Element und befinde mich auf der rechten Seite. Alle folgenden Elemente befinden sich links neben mir und sind schmaler, bis der Platz ausreicht. Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur.
Ich bin das zweite Element und bin schmaler, da der Platz vom ersten Element belegt ist. Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet.
Erst durch clear:right; wird float:right; aufgehoben, und ich beginne daher wieder unterhalb des ersten Elements. Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore. Sed diam nonumy eirmod tempor invidunt.