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.
Inhaltsverzeichnis
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, die intrinsischen Größen für das Element. -
inherit, Breitenangabe des Elternelements
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 Sie explizit bestimmen müssen, dass für ein Element keine Mindestbreite gilt, definieren Sie 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
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.
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 zuheighterfolgt wäre, Ausgangswert -
fit-content,min-contentundmax-content, die intrinsischen Größen für das Element. -
inherit, Höhenangabe des Elternelements
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.
Fazit
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.
- 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"[4]
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 Seitenelementen nur mit vielen Tricks gebaut werden. Mit Grid Layout können Sie so etwas ohne Höhenangaben realisieren.
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.
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.
Verwenden Sie 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 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.Verwenden Sie deshalb die gleichnamige Funktion fit-content(Maximallänge).
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
- ↑ stackoverflow: Working with the CSS height property and percentage values
- ↑ alistapart: A Dao of Web Design by John Allsopp April 07, 2000
