CSS/Tutorials/Boxmodell/Größenangaben
-
30min
- leicht
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.[1] [2]
Für die Gestaltung von Webseiten ist es aber möglich, selbst Abmessungen von Elementen festzulegen. Dieses Tutorial zeigt, wie man das erreicht. Gleichzeitig wird aber bei jedem Beispiel überlegt, welche dieser Festlegungen überhaupt notwendig und sinnvoll sind. Oft geht es ohne!
Inhaltsverzeichnis
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.
"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"[3]
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.
width
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 zuwidtherfolgt wäre, Ausgangswert -
fit-content,min-contentundmax-content, intrinsischen Größen, die wir im 2. Abschnitt behandeln
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
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.
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
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.
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.
none nicht erlaubt. Wenn du explizit bestimmen musst, dass für ein Element keine Mindestbreite gilt, definiere min-width: 0.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
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.
div#foo { height: 2em; }
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 zuheighterfolgt wäre, Ausgangswert -
fit-content,min-contentundmax-content, intrinsischen Größen die im zweiten abshcnitt behandel werden.
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.
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.
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 Element, dessen Inhalt größer als mit min-height angegeben ist, automatisch erhöht.
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.
aspect-ratio
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 werdne, das Element schrumpft oder wächst automatisch.[5]
.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.
Fazit
Information: Magic Numbers
Mit festen Zahlenwerten (auch engl. „Magic Numbers“ genannt) erreichst du 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 (40"-Wide Screen) und unter Idealbedingungen testen.
- 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.
Intrinsische Abmessungen
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 und fit-content() 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. Desweiteren kann die Größenberechnung mit border-box und content-box gesteuert werden.
Merke
- Intrinsisch: Der Inhalt entscheidet.
- Extrinsisch: Der Entwickler entscheidet.
max-content
Das Schlüsselwort max-content passt die Breite so an, dass der Inhalt den maximal möglichen Raum einimmt.
.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.
Verwende hier das Schlüsselwort fit-content.
min-content
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.
.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
Das Schlüsselwort fit-content entspricht fit-content(stretch) der gleichnamigen CSS-Funktion. Es 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 {
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.
fit-content wieder aus dem Standard enfernt werden.Verwende deshalb
fit-content() .Siehe auch
Referenz
intrinsische Werte
- clamp()
- fit-content()
- minmax()
- repeat()
- stretch
Weblinks
- ↑ CSSWG: CSS basic box model Entwurf
- ↑ css-tricks: CSS is Awesome von Brandon Smith, 03.Juli 2017
- ↑ alistapart: A Dao of Web Design by John Allsopp April 07, 2000
- ↑ stackoverflow: Working with the CSS height property and percentage values
- ↑ aspect-ratio Gotcha! (cssence.com)
