CSS width / height • Breite und Höhe

width und height: Breite und Höhe beschränken

CSS width und height legen zwar Breite und Höhe eines HTML-Elements fest, sind aber mit Vorsicht anzuwenden:

.box {
	height: 320px;
	width: 240px;
}

.box .content {
	height: 260px;
	width: 280px;
}

Die Hintergrundfarbe zeigt, dass die Box Breite und Höhe einhält. Aber übergroße Inhalte ohne weitere Formatierung fließen über – und zwar sowohl nach rechts (z.B. Bilder) als auch nach unten (z.B. Text).

• Die Breite eines Elements wird durch die CSS-Eigenschaft width begrenzt.
  Aber ein überbreites Element wie ein Bild muss zusätzlich (z.B. durch max-width: 100%) eingeschränkt werden.
• Die Höhe eines HTML-Blocks mit CSS height ist hingegen nur ein Anfangswert!
  Wenn der Inhalt für das umfassende Element zu groß ist, fließt er weiter, auch wenn die Höhe der Box als CSS-Eigenschaft height angegeben ist. Das Überfließen kann nur durch CSS overflow verhindert werden, wobei übergroße Inhalte nicht mehr angezeigt werden.
• Während padding zur Breite eines Elements gezählt wird, zählen die Browser padding, border und margin nicht zur Höhe eines Elements hinzu.
  Erst CSS box-sizing macht die Kombination von width, height, padding und border intuitiver.

Inhalt fließt über

Übergroßer Inhalt überlagert die auf die Box folgenden Inhalte oder drängt die folgenden Inhalte weiter nach unten im Dokument.

<div style="width: 350px; height: 260px; background: lavender;">
   <img src="–" width="400" height="175" alt="…" />
   <p> …  </p>
</div>

img width und height anpassen

CSS hält sich nur dann an width und height, wenn die Inhalte vollständig in das Element passen oder kleiner als der vorgesehene Raum sind.

Für das responsive Webdesign passt CSS die Größe von Bildern an den umfassenden Block an:

img {
	width: 100%;
	height: auto;
}

Breite und Höhe einschränken

width und height und selbst min-width / min-height sind nur erste Schritte, um Blöcke in das Layout einzupassen. clamp(), min() und max() begrenzen Blöcke und Schriftgrößen und passen sie ohne zusätzliche Media Queries und Breakpoints in das Layout ein, text-overflow begrenzt einzeiligen Text auf die Breite des umfassenden Containers, wenn z.B. Überschriften grundsätzlich in eine Zeile passen sollen.

line-clamp schränkt die Zahl der Zeilen innerhalb eines Blocks ein.

CSS width / CSS height

Erblich: nein

width, height

Breite / Höhe eines Elements. Wenn die Höhe eines Bildes auf einen Wert gesetzt ist und die Breite als auto angegeben wird, wird das Bild proportional skaliert (das Seitenverhältnis bleibt erhalten).

Werte

<length> | <%> | auto | inherit

<length>

kann in einer der folgenden Maßeinheiten angegeben werden: cm (Zentimeter), em (ems), ex (x-Höhe), in (Inch), mm (Millimeter), pc (Pica), pt (Punkt), px (Pixel).

<percentage> (Prozentsatz)

basiert auf der Höhe des umfassenden Blocks, die als 100% definiert ist. Wenn die Höhe des umfassenden Blocks nicht expliziet notiert ist und der umfassende Block nicht absolut positioniert ist, wird der Wert wie "auto" interpretiert. Eine Prozentangabe für das Wurzelelement wird relativ zum Viewport interpretiert.

auto

ist die Voreinstellung und weist den Browser an, die Höhe automatisch zu berechnen. Wenn sowohl Höhe als auch Breite auf auto gesetzt werden, bleiben die Dimensionen des Text- oder Bildelements unverändert. Durch die Angabe von auto wird auch sichergestellt, dass keine vorangegangenen Deklarationen die Höhe des Elements beeinflussen.

width / height in px, % oder em?

Die meistgenutzten Angaben für die Breite / Höhe von Elementen sind px, em und %.

Pixel px

ist eine absolute Angabe. Wenn ein Block mit 200px Breite angegeben ist, dann ist er 200px breit, egal ob er auf einem Monitor mit 320px Breite oder mit einer Auflösung von 1980 x 1200 gerendert wird.

<div style="width: 200px;">
    <div style="width: 50%;"></div>
</div>

Prozent %

ist eine relative Angabe und bezieht sich auf die Breite bzw. Höhe des umfassenden Blocks.

.myDiv {
    width: 100vw;
    height: 100vh;
    background-color: red;
}

füllt das Browserfenster vollständig.

Viewport width / height

Angabe relativ zur Größe des Viewports bzw. Browserfensters.

em / rem

em ist eine Maßangabe relativ zur Schriftgröße des umfassenden Blocks. rem ist relativ zur Schriftgröße des html-Elements (16px)