Boxmodell/CSS-Größen verstehen – von px und em bis fit-content

Aus SELFHTML-Wiki
Boxmodell(Weitergeleitet von Min-content)
Wechseln zu: Navigation, Suche

Jedes HTML-Element besitzt zunächst eine vom Browser bestimmte Standardgröße. Sie ergibt sich aus dem verfügbaren Platz, dem Inhalt und – bei einigen Elementen wie Bildern – aus ihren eigenen (intrinsischen) Abmessungen.[1]

Viele CSS-Eigenschaften wie width, max-width, height oder inline-size erwarten eine Größenangabe. Entscheidend ist jedoch nicht die Eigenschaft selbst, sondern welche Arten von Größenangaben verwendet werden können.

Dieses Tutorial zeigt, wie man diese Größen verändert oder gezielt vorgibt.[2] Gleichzeitig wird bei jedem Beispiel hinterfragt, welche Größenangaben überhaupt notwendig und sinnvoll sind – denn oft kommt der Browser auch ohne sie zu einem guten Ergebnis.

Explizite Größen

Inhalt auf Webseiten ist wie Wasser: es lässt sich nicht zusammendrücken. Wenn der Viewport schmaler wird, drängt der Inhalt nach unten.

„zerschossenes“ Layout – die dritte Spalte ist zu schmal für die Box, sodass diese nach unten wandern muss.

Wenn du nun feste oder auch relative Breiten- und Höhenangaben verwendest, entstehen unschöne Effekte: Text steht über, ragt nach unten heraus oder wird nicht vollständig dargestellt.

"Wenn Sie Stylesheets richtig verwenden, um das Aussehen einer Seite vorzuschlagen und nicht, um das Aussehen einer Seite zu kontrollieren, und wenn Sie sich nicht auf Ihr Stylesheet verlassen, um Informationen zu übermitteln, dann werden Ihre Seiten in jedem Browser, ob in der Vergangenheit oder in der Zukunft, gut "funktionieren."
John Allsopp: A Dao of Web Design, by John Allsopp April 07, 2000[3]


Viele CSS-Eigenschaften erwarten eine Größenangabe, etwa width bzw. inline-size, height bzw block-size, oder max-width. Entscheidend ist jedoch nicht die Eigenschaft selbst, sondern welche Arten von Größenangaben verwendet werden können.

Warum feste Größen nicht immer reichen

Viele Tutorials fangen mit Boxen mit einer willkürlich gesetzten Breite von 100px an. Das ist aber kein Zufall, sondern der einfachste Fall überhaupt: px ist eine feste, absolute Einheit – 100px sind 100px, unabhängig davon, wie groß die Schrift ist, wie breit der Viewport ist oder was der Nutzer in seinen Browser-Einstellungen konfiguriert hat. Genau diese Einfachheit macht px zum bequemen Einstieg – und genau diese Starrheit macht px für viele reale Anwendungsfälle ungeeignet.

Trotz des Namens ist px kein Gerätepixel. Es ist eine absolute Längeneinheit, definiert als 1/96 Zoll – genau wie cm, mm oder pt, nur eben in einer für Bildschirme gebräuchlichen Größenordnung. „Absolut" bedeutet hier: px verändert sich nicht, wenn sich die Schriftgröße des Elternelements ändert, und – von der klassischen Seiten-Zoom-Funktion des Browsers abgesehen – auch nicht mit dem Viewport.

Immer dann, wenn eine Größe bewusst nicht mitwachsen soll, ist eine Angabe in px völlig ok:

Karte mit Rand und Schatten 
.card {
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px rgb(0 0 0 /0.1);
}

Ein 1px-Rahmen soll ein 1px-Rahmen bleiben – ob die Schrift daneben klein oder groß ist, spielt für die Linie keine Rolle.

Für alles, was unabhängig von Schrift und Inhalt eine feste Größe haben soll (Rahmen, Schatten, Trennlinien) ist eine Angabe in px völlig ok.

Sobald eine Größe mit Text zu tun hat – Innenabstände von Buttons, Zeilenabstände, Schriftgrößen selbst –, wird px unflexibel. Nutzer können in ihrem Browser oder Betriebssystem eine größere Standard-Schriftgröße einstellen, etwa aus Sehschwäche. rem und em reagieren darauf (dazu mehr im nächsten Kapitel), px nicht!

Neben px gehören auch cm, mm, in, pt und pc zu den absoluten Einheiten. Diese spielen vor allem im Druck eine Rolle – dazu geht ein eigenes Tutorial ins Detail:

  • Print-CSS (Druckausgabe)

    Druckvorlage

     

Schriftrelative Einheiten – em vs. rem

Sobald eine Größe mit Text zu tun hat, wird px unflexibel. Nutzer können ihre Standard-Schriftgröße im Browser oder Betriebssystem anpassen – rem und em reagieren darauf, px nicht. Genau das macht sie zur besseren Wahl für alles, was mit Schrift zusammenhängt.

Beide Einheiten sind relativ zu einer Schriftgröße, aber zu einer unterschiedlichen:

  • rem (root em) ist relativ zur Schriftgröße des <html>-Elements. Sie ändert sich nur, wenn diese Root-Schriftgröße geändert wird – entweder vom Nutzer oder gezielt im CSS.
  • em ist relativ zur Schriftgröße des eigenen Elements bzw., bei font-size selbst, zur des Elternelements.
    Das macht em kontextabhängig: dieselbe em-Angabe ergibt in unterschiedlichen Elementen unterschiedliche Pixelwerte.
px, em oder rem? ansehen …
:root {
  font-size: 16px;
}
.px {
  width: 160px;
  background: salmon;
  border-radius: 8px;	
}

.em {
  width: 10em;
  background: lightgreen;
  border-radius: 0.5em;	
}

.rem {
  width: 10.5rem;
  background: lightyellow;
	border-radius: 0.5rem;
}

Wenn der Slider die Schriftgröße eines übergeordneten Containers und nicht die des <aside> selbst ändert, ändert sich die „em“-Box, weil das <aside> diese Größe erbt – und nicht, weil sich „em“ direkt auf das übergeordnete Element bezieht.


Wann verwende ich was?

  • rem als Standard für Abstände, Schriftgrößen und alles, was mit der globalen Nutzer-Einstellung mitwachsen soll.
  • em gezielt dort, wo eine Komponente proportional zu ihrer eigenen Schriftgröße bleiben soll – unabhängig vom umgebenden Kontext. (z. B. padding in einem Button, das mit dessen font-size mitwächst)
  • Buttons mit CSS gestalten

    Sauberes CSS ohne Chaos:
    Gestaltung mit Variablen und SPOT
    ein Button, der responsiv „mitwächst“

     

Viewport-Einheiten – vw/vh + dvh/svh

Wenn die Bezugsgröße nicht die Schrift, sondern der Viewport ist: Hero-Sections, Sidebars mit fester Breitenrelation, "fluid typography" mit clamp()

  • dvh vs. vh: das klassische Mobile-Problem (Adressleiste frisst Höhe) und warum dvh das löst
  • Warnung: vw allein ignoriert Nutzer-Zoom/Schriftgrößeneinstellungen → Barrierefreiheits-Falle, deshalb oft in clamp() mit rem kombinieren, z. B. clamp(1rem, 2vw + 0.5rem, 2rem)

Intrinsische Größen

Nicht alle Elemente benötigen eine explizite Größenangabe. Manche Inhalte bringen bereits eine natürliche Größe mit. Dazu gehören beispielsweise Bilder, Videos oder eingebettete Grafiken.

Beispiel 
<img src="photo.jpg" alt="Beispielbild">

Ein Bild besitzt eine intrinsische Breite und eine intrinsische Höhe. Diese Informationen sind als Metadaten in der Bilddatei gespeichert und dem Browser bekannt. Deshalb kann ein Bild auch ohne CSS in seiner ursprünglichen Größe dargestellt werden.

Erst durch CSS wird diese natürliche Größe verändert – etwa mit width, height oder später auch mit aspect-ratio. Die intrinsische Größe bleibt dabei die Ausgangsbasis, an der sich der Browser orientiert.

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

Natürliche Größen von Bildern

Die Eigenschaft max-width legt die Maximalbreite eines CSS-Elements fest. Ist die berechnete Breite größer als max-width, verwendet der Browser stattdessen den Wert von max-width. Das gilt auch für Bilder mit einer großen natürlichen (intrinsischen) Breite.

max-width für die passende Formatierung von Bildern ansehen …
figure {
	width: 20em;
	padding: 0.5em;
	border: thin solid;
}

figure .max100 {
  max-width: 100%;
}

.demo-box > img {
  width: 100%;
  max-width: 60em;
}

Das Bild innerhalb des figure-Elements ragt über die festgelegte Breite von 20em hinaus.

Durch eine max-width: 100%; für Bilder der Klasse .max100 wird das Bild passend skaliert.

Das untere Bild erhält zwei Regelsätze:

  • width: 100%; lässt das Bild die Breite des gesamten Viewports einnehmen.
  • Ist dieser größer als max-width: 60em; erhält das Bild dies maximale Breite und wächst nicht mehr mit.

Im SELF-Wiki wird max-width z. B. verwendet, um auf großen Viewports die Zeilenlänge nicht ins Unendliche wachsen zu lassen.

Inhaltsbasierte Größen

Browserunterstützung
caniuse.com

Im CSS basic box model wurden für Größenangaben neben festen und prozentualen Werten auch die Schlüsselwörter max-content, min-content und fit-content hinzugefügt. Das sind keine Längeneinheiten, sondern Schlüsselwörter, die sich am Inhalt orientieren (intrinsische vs. extrinsische Größe).

Diese Schlüsselwörter bewirken intrinsische Abmessungen (intrinsisch = von innen bzw. sich selbst heraus kommend), die sich nach dem Inhalt und nicht nach externen Festlegungen richten. Desweiteren kann die Größenberechnung mit border-box und content-box gesteuert werden.

Merke

  • Intrinsisch: Der Inhalt entscheidet.
  • Extrinsisch: Der Entwickler entscheidet.
Intrinsische Größen ansehen …
.max-content {
  width: max-content;  
}
.min-content {
  width: min-content;
}
.fit-content { 
  width: fit-content;  
}

Der obere Textabsatz nimmt ohne weitere Festlegung die gesamte verfügbare Breite des Elternelements an.

Textabsätze im .demo-box-Container erhalten Breiten mit entsprechenden Schlüsselwörtern:

  • Mit max-content wird die Breite an den verfügbaren Inhalt angepasst.
    Beachte: Falls der Inhalt und damit die Breite höher als die verfügbare Breite ist, kommt es zu keinem Zeilenumbruch, sondern der überstehende Teil verschwindet aus dem Viewport.
    Verwende hier das Schlüsselwort fit-content.
  • min-content passt die Breite so an, dass der Inhalt den kleinsten möglichen Raum einimmt. So bestimmt das längste Wort, bzw. Kindelemenent die Breite des Elements.
  • fit-content passt die Breite an den verfügbaren Inhalt an. Falls der Inhalt und damit die Breite höher als die verfügbare Breite ist, kommt es zu einem Zeilenumbruch, sodass der Inhalt immer sichtbar ist.
    fit-content entspricht fit-content(stretch) der gleichnamigen CSS-Funktion.

Seitenverhältnisse festlegen

Wie in den bisherigen Beispielen gezeigt, ist weniger CSS oft mehr! Feste Höhenangaben bergen immer die Gefahr, dass der Inhalt aus den Elementen herausragt.

Trotzdem kann es gut aussehen, wenn Elemente quadratisch sind oder ein festes Seitenverhältnis haben. Dabei reicht es aber, nur eine Dimension und mit der aspect-ratio-Eigenschaft das gewünschte Seitenverhältnis festzulegen. Bei einer Änderung der extrinsischen Größe muss nur ein Wert angepasst werden, das Element schrumpft oder wächst automatisch.[4]

Quadratisch, 4:3 oder 16:9 ansehen …
	.square {
		aspect-ratio: 1 / 1;
		object-position: 55% 0;
	}
	.normal {
		aspect-ratio: 4 / 3;
	}
	.landscape {
		aspect-ratio: 16 / 9;
		object-position: 60% 0;		
	}	
	.ultrawide {
    aspect-ratio: 21 / 9; 
	}	

figure > img {
	width: 100%;
	object-fit: cover;
}

#controls {
	button {
		height: 6rem;	
		}
}

Im Beispiel kann das Bild mit dem gewünschten Seitenverhältnis dargestellt werden. Dabei dient für die Buttons die Höhe von 6rem als Grundlage; Das Bild erstreckt sich über die volle Breite des figure-Elements.

Mit object-fit: cover wird das Bild passend zugeschnitten; die quadratische Ansicht wird mit object-position so ausgerichtet, dass Kirche und Bäume sichtbar sind.

Größen begrenzen

Bisher haben wir verschiedene Möglichkeiten kennengelernt, wie die Größe eines Elements entsteht:

  • durch eine explizite Angabe wie width: 20rem
  • durch die verfügbare Fläche wie bei Prozentwerten
  • durch den Inhalt selbst mit intrinsischen Größen wie max-content oder fit-content

In der Praxis möchte man diese Größen aber oft begrenzen. Ein Element soll beispielsweise mit dem Bildschirm mitwachsen, aber nicht unendlich groß werden. Oder ein Button soll nicht so schmal werden, dass er kaum noch bedienbar ist.

Dafür gibt es die Eigenschaften min-width, max-width, min-height und max-height.
Sie setzen eine untere oder obere Grenze für die berechnete Größe eines Elements.

max-width: Eine obere Grenze festlegen

Eine typische Anwendung ist Text oder Bilder auf großen Bildschirmen zu begrenzen.

Zeilenlängen begrenzen 
article {
  width: 100%;
  max-width: 65ch;
}

Der Text darf den verfügbaren Platz nutzen, aber niemals breiter als 65ch werden.

Auch bei Bildern wird max-width häufig verwendet:

Bilder sollen nicht zu breit werden. 
img {
  max-width: 100%;
  height: auto;
}

Das Bild kann kleiner werden, wenn der Container zu klein ist, aber es läuft nicht über den Rand hinaus.

min-width: Nicht kleiner als ...

Die Eigenschaft min-width legt die Mindestbreite eines Elements fest.

Buttons nehmen als Inline-Element die Breite des Inhalts an – der letzte OK-Button ist deshalb zu klein, um ihn mit dem Daumen anklicken zu können.

Buttons mit Mindest-Breite ansehen …
div {
	width: max-content;
	max-width: 100%;
}

.mindest button {
	display: inline-block;
	margin: 0.5em ;
	min-width: 5em;
}
.gleich {
width: max-content;
}

.gleich button {
	display: block;
	margin: 1em 0;
	width: 100%;
}

Die mittlere Gruppe Buttons wird mit display: inline-block; inline dargestellt. Damit Buttons mit wenig Text nicht zu schmal werden, wird mit min-width: 5em; eine Mindestbreite von 5em vergeben.

Die untere Gruppe soll untereinander mit gleicher Breite angeordnet werden. Dies wird mit width: 100%; für die Buttons und width: max-content; max-width: 100%; für das umgebende div-Element .gleich erreicht. Dieses wird mit width: max-content am Inhalt des längsten Buttons ausgerichtet.

Warum feste Höhen problematisch sind

Man kann für bestimmte Elemente die Höhe ihrer Inhaltsbereiche festlegen. Die Eigenschaft height wirkt dabei nur auf Elemente wie div, p, h1 oder h2, die auf Blockebene erzeugt wurden. Die Höhe von Inline-Elementen wie span wird durch den Wert der Eigenschaft line-height bestimmt.

Beispiel 
button { height: 2em; }

min-height

Die Eigenschaft min-height legt die Mindesthöhe eines Elements fest. Sie mag zuerst keinen Unterschied zu height aufweisen, allerdings wird die Höhe eines Elements, dessen Inhalt größer als mit min-height angegeben ist, automatisch erhöht.

Beispiel ansehen …
      p {
        background: khaki;
        height: auto;
        padding: .5em;
        width: 10em;
      }
      .mindesthoehe {
        min-height: 6em;
      }

Während der erste Absatz nur die Höhe des einzeiligen Textes hat, wird der 2. Absatz mindestens 6em hoch. Falls der Text länger wird, wächst die Box mit.

Beachte: Prozentangaben bei Höhenangaben bleiben wirkungslos, wenn der umschließende Block keine festen Höhenangaben hat. Das Element richtet sich dann nach dem enthaltenen Inhalt.[5]. Ist die Höhe des umschließenden Blocks lediglich mit min-height oder max-height limitiert, ist seine Höhe nicht fest und eine prozentuale Höhenangabe von Kind-Elementen bleibt immer noch wirkungslos!

max-height

Die Eigenschaft max-height legt die maximale Höhe eines CSS-Elements fest. Hierbei wird die Höhe des Elements so lange an den Inhalt angepasst, bis der angegebene Wert erreicht ist.

Beispiel ansehen …
 
div {
	background: khaki;
	height: auto;
	padding: .5em;
	width: 10em;
}
.hoehe_10 { height: 10em; }
.max_10 { max-height: 10em; }
}

Die linke Box ist 10em hoch. Die mittlere Box ist so hoch wie die Kindelemente, maximal jedoch 10em. Allerdings ist aber auch die dritte Box nur maximal 10em hoch. Der überlange Text läuft über das Element heraus. Eine Begrenzung der Höhe verändert nur die Größe der Box – der Inhalt selbst wird dadurch nicht kleiner.

Wenn der Inhalt mehr Platz benötigt als die Box zur Verfügung stellt, ragt er über die Grenzen des Elements hinaus. Bei Text kann dies schnell passieren, wenn sich die Schriftgröße ändert, Inhalte länger werden oder ein Element auf kleineren Bildschirmen dargestellt wird.

Wie mit solchen überstehenden Inhalten umgegangen wird, kann mit der CSS-Eigenschaft overflow gesteuert werden.

  • Overflow – Wenn Inhalte nicht in die Box passen
    • overflow
    • text-overflow
    • scroll
     

Fazit

Empfehlung: Verwende …
  • keine festen Werte für die Breite
  • keine festen oder auch relativen Werte für die Höhe eines Elements, sondern lass dem Inhalt (auch bei geänderter Schriftgröße) den nötigen Platz. Abstände können mit padding geregelt werden.
  • relative Längenmaße wie em, die sich an geänderte Schriftgrößen anpassen.

Siehe auch

  • Einstieg in CSS
    Vom Entwurf zum Layout
    • relative Größen
    • Breakpoints: Inhalt über Design
     
  • Einstieg in Grid Layout
    • Grid-Container + Grid-Items (Rasterelemente)
    • benannte Linien und Rasterbereiche
    • Responsive Raster ohne Media Queries
    • Ausrichtung von Grid-Items
     
  • Einstieg in Flexbox
    • Warum Flexbox?
    • Flex-Container
    • Flex-Items
    • Responsives Mehrspaltenlayout
     
  • Zentrierte Inhalte
    • align-content
    • Grid + Flexbox
    • ältere Varianten
     

Referenz

konkrete Abmessungen


Mindestabmessungen


Maximalabmessungen

intrinsische Werte


Weblinks

  1. ↑ MDN: Styling Basics - Sizing
  2. ↑ CSSWG: CSS basic box model Editor's Draft
  3. ↑ alistapart: A Dao of Web Design by John Allsopp April 07, 2000
  4. ↑ aspect-ratio Gotcha! (cssence.com)
  5. ↑ stackoverflow: Working with the CSS height property and percentage values

Abgerufen am 21.07.2026
von "http://wiki.selfhtml.org/wiki/Boxmodell/CSS-Gr%C3%B6%C3%9Fen_verstehen_%E2%80%93_von_px_und_em_bis_fit-content"