Begriffe Grundgerüst Wichtige HTML-Tags CSS Arbeitsaufträge

Width und Height

Es ist möglich, die Breite und Höhe eines block-Elements festzulegen. Die Angabe erfolgt meist in Pixel, Zentimeter oder in % des übergeordneten block-Elements. Es folgt zuerst ein allgemeines Beispiel und danach ein paar konkrete Beispiele. Der Textfluss wird durch die Breite beeinflusst, jedoch nicht durch die Höhe.

div {
  width: 100px;
  height: 200px;
}



<p style="width: 150px; background-color: lightgreen">Text...</p>

Die Höhe dieses Blockes passt sich automatisch an, da nur die Breite definiert wurde.



<p style="height: 90px; background-color: lightyellow">Text...</p>

Hier wird der Text über die untere Begrenzung des Block-Elements geschrieben. Für die Darstellung des darauf folgenden Elements gilt jedoch nicht die Höhe des gesamten Textes, sondern die Höhe des Block-Elements.

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 magna aliquyam erat, sed diam voluptua.





<p style="width: 70px; height: 60px; background-color: lightblue">Text...</p>

Hier wurde sowohl die Breite als auch die Höhe definiert.