CSS/Tutorials/Boxmodell/Größenangaben

Aus SELFHTML-Wiki
< CSS‎ | Tutorials‎ | Boxmodell
Wechseln zu: Navigation, Suche

Text-Info

Lesedauer
30min
Schwierigkeitsgrad
leicht
Vorausgesetztes Wissen
Einstieg in CSS
   • Box-Modell


Es gibt aus CSS-Sicht grundsätzlich zwei verschiedene Elementtypen: Solche, die immer so breit wie ihr Elternelement sind und solche, die so breit wie ihr Inhalt sind. Beide Typen haben eine an den Inhalt angepasste Höhe. Für die Gestaltung von Webseiten ist es möglich, Abmessungen von Elementen festzulegen.

width[Bearbeiten]

Die Eigenschaft width legt die Breite bestimmter Elemente fest. Sie wirkt dabei nur auf Elemente, die auf Blockebene erzeugt wurden.

Erlaubt sind folgende Werte:

  • eine nicht-negative Breitenangabe
  • eine Prozentangabe, diese bezieht sich auf die Breite des umschließenden Blocks
  • auto, weist den Browser an, die Breite so zu ermitteln, als ob keine Angabe zu width erfolgt wäre, Ausgangswert
  • fit-content, min-content und max-content, die intrinsischen Größen für das Element.
  • inherit, Breitenangabe des Elternelements


flexible Breiten für Bilder
img {
  width: 100%;
}

@media (min-width: 25em) {
  img {
    width: 50%;
    float: right;
    margin: 0 0 1em 1em;
  }
}

@media (min-width: 50em) {
  img {
    width: 25%;
  }
}

Das Bild erhält auf kleinen Bildschirmen die volle Breite.

Eine Medienabfrage an den Browser lässt das Bild bei einer Viewport-Breite von mehr als 25em auf die halbe Breite schrumpfen und mit float an die rechte Seite floaten (englisch für schweben, hängen). Passend dazu erhält es mit margin einen unteren und linken Abstand zum umfließenden Text.

max-width[Bearbeiten]

Die Eigenschaft max-width legt die Maximalbreite eines CSS-Elements fest. Das verhindert, dass der benutzte Wert der width-Eigenschaft größer wird als der festgelegte Wert von max-width.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 2.0
Beachten Sie: max-width überschreibt width, allerdings überschreibt min-width auch max-width.
max-width für die passende Formatierung von Bildern ansehen …
figure {
	width: 25em;
	padding: 0.5em;
	border: thin solid;
}

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

body > img {
  width: 100%;
  max-width: 40em;
}

Das Bild innerhalb von figure-Elements ragt über die festgelegte Breite von 25em 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 verwendet, um auf großen Viewports die Zeilenlänge nicht ins Unendliche wachsen zu lassen.


min-width[Bearbeiten]

Die Eigenschaft min-width legt die Mindestbreite eines Elements fest. Die Eigenschaft unterscheidet sich nicht im Gebrauch von min-height, sie wirkt sich nur statt der Höhe auf die Breite aus.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 2.0
Buttons mit Mindest-Breite ansehen …
div {
	width: max-content;
	max-width: 100%;
}

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

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

Die obere 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 erreicht.

Beachten Sie: Im Gegensatz zu max-width bzw. max-height ist die Angabe none nicht erlaubt. Wenn Sie explizit bestimmen müssen, dass für ein Element keine Mindestbreite gilt, definieren Sie min-width: 0.
Beachten Sie: min-width überschreibt alle Angaben für max-width und width.
Gegenüberstellung von min-width und max-width ansehen …
div {
  height: 10em;
  width: 50%;
  background-color: khaki;
  margin: 1em auto;
}
p:first-child {
  text-align: center;
}
code {
  display: block;
}
.min_40 {
  min-width: 40em;
}
.max_40 {
  max-width: 40em;
}
#vergleich {
  width: 40em;
  height: 2em;
  line-height: 2em;
}

height[Bearbeiten]

Sie können für bestimmte Elemente die Höhe ihrer Inhaltsbereiche festlegen. Die Eigenschaft height wirkt dabei nur auf Elemente, die auf Blockebene erzeugt wurden. Die Höhe von Inline-Elementen wird durch den Wert der Eigenschaft line-height bestimmt.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 1.0
Beispiel
div#foo { height: 2em; }

Die Eigenschaft height legt die Höhe bestimmter Elemente fest. Erlaubt sind folgende Werte:

  • eine nicht-negative Längenangabe
  • eine Prozentangabe, dieser bezieht sich auf die Höhe des umschließenden Blocks
  • auto, weist den Browser an, die Höhe so zu ermitteln, als ob keine Angabe zu height erfolgt wäre, Ausgangswert
  • fit-content, min-content und max-content, die intrinsischen Größen für das Element.
  • inherit, Höhenangabe des Elternelements
Beachten Sie: Prozentangaben bleiben wirkungslos, wenn der umschließende Block keine festen Höhenangaben hat. Das Element richtet sich dann nach dem enthaltenen Inhalt.[1]. 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[Bearbeiten]

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.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 2.0
Beispiel ansehen …
 
div {
        background: khaki;
        float: left;
        height: auto;
        margin: 1em;
        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.

Beachten Sie: Ein Überlaufen von zu langem Text kann mit overflow formatiert werden.

min-height[Bearbeiten]

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 Element, dessen Inhalt größer als mit min-height angegeben ist, automatisch erhöht.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 2.0
Beispiel ansehen …
      p {
        background: khaki;
        float: left;
        height: auto;
        margin: 1em;
        width: 10em;
      }
      .mindesthoehe {
        min-height: 100px;
      }

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


Fazit[Bearbeiten]

Information: Magic Numbers

Mit festen Zahlenwerten (auch engl. „Magic Numbers“ genannt) erreichen Sie unter bestimmten Umständen das Gewünschte, aber in anderen Kontexten wie geänderten Viewport- oder Schriftgrößen wird das Layout zerstört.
Meistens wurden sie von Entwicklern verwendet, die ihre Arbeit nur in ihrem eigenen Browser und unter Idealbedingungen testeten.
Empfehlung: Verwenden Sie …
  • keine festen Werte für die Breite
  • keine festen oder auch relativen Werte für die Höhe eines Elements, sondern lassen dem Inhalt (auch bei geänderter Schriftgröße) den nötigen Platz. Regeln Sie Abstände über padding.
  • relative Längenmaße wie em, die sich an geänderte Schriftgrößen anpassen.

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

"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"[2]

„zerschossenes“ Layout

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

Früher konnte ein so genanntes Holy-Grail-Layout mit mehreren gleichhohen Seiteneelementen nur mit vielen Tricks gebaut werden. Mit Grid Layout können Sie so etwas ohne Höhenangaben realisieren.

Intrinsische Abmessungen[Bearbeiten]

Im CSS basic box model wurden für Größenangaben neben festen und prozentualen Werten auch die Schlüsselwörter max-content, min-content, available, fit-content(), border-box und content-box hinzugefügt. 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.

  • Chrome
  • Edge
  • Firefox
  • Opera
  • Safari

Details: caniuse.com

max-content[Bearbeiten]

Das Schlüsselwort max-content passt die Breite so an, dass der Inhalt den maximal möglichen Raum einimmt.


intrinsische Abmessungen ansehen …
.max-content {
  width: max-content;  
}
Der Textabsatz nimmt ohne weitere Festlegung die gesamte verfügbare Breite des Elternelements an.
Mit dem Schlüsselwort max-content wird die Breite an den verfügbaren Inhalt angepasst.
Beachten Sie: 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.
Verwenden Sie hier das Schlüsselwort fit-content.

min-content[Bearbeiten]

Das Schlüsselwort 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.

intrinsische Abmessungen ansehen …
.min-content {
  width: min-content;
}
Der Textabsatz nimmt ohne weitere Festlegung die gesamte verfügbare Breite des Elternelements an.
Das Schlüsselwort min-content passt die Breite so an, dass der Inhalt den kleinsten möglichen Raum einimmt. So bestimmt das längste Wort, bzw. Kindelement die Breite des Elements.

fit-content[Bearbeiten]

Das Schlüsselwort 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.


intrinsische Abmessungen ansehen …
.fit-content { 
  width: fit-content;  
}
Der Textabsatz nimmt ohne weitere Festlegung die gesamte verfügbare Breite des Elternelements an.
Mit dem Schlüsselwort fit-content wird die Breite an den verfügbaren Inhalt angepasst.
Beachten Sie: Langfristig soll das Schlüsselwort fit-content wieder aus dem Standard enfernt werden.
Verwenden Sie deshalb die gleichnamige Funktion fit-content(Maximallänge).


Weblinks[Bearbeiten]

Quellen:

  1. stackoverflow: Working with the CSS height property and percentage values
  2. alistapart: A Dao of Web Design by John Allsopp April 07, 2000

Siehe auch[Bearbeiten]

Referenz

konkrete Abmessungen

Mindestabmessungen


Maximalabmessungen

intrinsische Werte