Breite¶

Mit der CSS-Eigenschaft width lässt sich die Breite eines Elements festlegen. Block-Elemente nehmen standardmäßig die gesamte verfügbare Breite ein, können jedoch durch width auf eine bestimmte Größe eingeschränkt werden. Inline-Elemente ignorieren diese Eigenschaft, sofern sie nicht zu Block- oder Inline-Block-Elementen gemacht werden.

Eigenschaftswert	Bedeutung
px	Legt eine feste Breite in Pixeln fest.
%	Definiert die Breite relativ zur Breite des Elternelements.
max-content	Passt die Breite an den größten Inhalt an (nur moderne Browser).
min-content	Passt die Breite an den kleinsten Inhalt an (nur moderne Browser).

h1 {
  width: 400px; /* feste Breite */
}

h2 {
  width: 50%; /* 50% der Elternelement-Breite */
}

p.text1 {
  width: max-content; /* Breite nach maximalem Inhalt */
}

p.text2 {
  width: min-content; /* Breite nach minimalem Inhalt */
}

CSS ist pures Design

max-width¶

max-width legt die maximale Breite eines Elements fest. Die Breite kann flexibel bleiben, überschreitet jedoch nie den angegebenen Wert. Übliche Einheiten sind px, %, em oder rem.

.box {
  max-width: 400px; /* Element wird nicht breiter als 800px */
}

min-width¶

min-width definiert die minimale Breite eines Elements. Die Breite kann flexibel wachsen, unterschreitet aber nicht den angegebenen Wert.

.box {
  min-width: 400px; /* Element wird nicht schmaler als 600px */
}