Breite#

width#

Mit der CSS Eigenschaft width kann die Breite von Elementen fesgelegt werden. Block Elemente nehmen den gesamten, zur Verfügung stehenden Platz ein. Mit width kann diese auf eine definierte Breite festgelegt werden.

Eigenschaftswert	Erklärung
px	Definiert eine feste Breite mittels Pixeln.
%	Definiert die Breite als Prozentangabe von der Breite des umgebenen Elternelementes.
max-content	Definiert die Breite nach dem maximalen Inhalt.
min-content	Definiert die Breite nach dem minimalen Inhalt.

h1 {
  width: 400px;
}

h2 {
  width: 50%;
}

p.text1 {
  width: max-content;
}

p.text2 {
  width: min-content;
}

See the Pen width1 by csswebsite (@csswebsite) on CodePen.

max-width#

Die CSS Eigenschaft max-width definiert eine variable Breite bis zu einer maximalen Breite. Eigenschaftswerte wie bei width.

p {
  max-width: 800px;
}

See the Pen width2 by csswebsite (@csswebsite) on CodePen.

min-width#

Die CSS Eigenschaft min-width definiert eine Breite, die von dem Element nicht unterschritten wird. Ansonsten nimmt es den gesamten Platz ein. Eigenschaftswerte wie bei width.

p {
  min-width: 600px;
}

See the Pen width3 by csswebsite (@csswebsite) on CodePen.

Bemerkung

Die max-width und min-width Angabe funktioniert am besten mit festen Einheiten wie px.