Übersicht
Die width
CSS Eigenschaft legt die Breite des Inhaltsbereichs eines Elements fest. Der Inhaltsbereich ist innerhalb des Innenabstands, Rahmens und Außenabstands des Elements.
Die min-width
und max-width
Eigenschaften überschreiben width
.
Initialwert | auto |
---|---|
Anwendbar auf | alle Elemente außer nicht ersetzte Inlineelemente, Tabellenzeilen und Zeilengruppen |
Vererbt | Nein |
Prozentwerte | bezieht sich auf die Breite des äußeren Elements |
Berechneter Wert | ein Prozentwert oder auto oder die absolute Länge |
Animationstyp | Längenangabe, Prozentsatz oder calc() ; |
Syntax
/* <length> Werte */
width: 300px;
width: 25em;
/* <percentage> Werte */
width: 75%;
/* Schlüsselwortwerte */
width: border-box;
width: content-box;
width: max-content;
width: min-content;
width: available;
width: fit-content;
width: auto;
/* Globale Werte */
width: inherit;
width: initial;
width: unset;
Werte
<length>
- Siehe
<length>
für mögliche Einheiten. <percentage>
- Angegeben als
<percentage>
der Breite des beinhaltenden Blocks. border-box
- Falls angegeben, wird der vorherige
<length>
oder<percentage>
Wert auf die Borderbox des Elements angewendet. content-box
- Falls angegeben, wird der vorherige
<length>
oder<percentage>
Wert auf die Contentbox des Elements angewendet. auto
- Der Browser berechnet die Breite für das angegebene Element.
max-content
- Die innere bevorzugte Breite.
min-content
- Die innere Minimalbreite.
available
- Die Breite des beinhaltenden Blocks minus horizontalem Rand, Außen- und Innenabstand.
fit-content
- Der größere Werte von:
- der inneren Minimalbreite.
- der kleineren Größe der inneren bevorzugten und der verfügbaren Breite.
Formale Syntax
auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)wobei
<length-percentage> = <length> | <percentage>
Beispiele
Standardbreite
p.goldie {
background: gold;
}
<p class="goldie">Die Mozilla Community produziert tolle Software.</p>
Pixel und ems
.px_length {
width: 200px;
background-color: red;
color: white;
border: 1px solid black;
}
.em_length {
width: 20em;
background-color: white;
color: red;
border: 1px solid black;
}
<div class="px_length">Breite gemessen in px</div>
<div class="em_length">Breite gemessen in em</div>
Prozentwert
.percent {
width: 20%;
background-color: silver;
border: 1px solid red;
}
<div class="percent">Breite in Prozent</div>
max-content
p.maxgreen {
background: lightgreen;
width: intrinsic; /* Safari/WebKit verwendet einen nicht standardisierten Namen */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
}
<p class="maxgreen">Die Mozilla Community produziert tolle Software.</p>
min-content
p.minblue {
background: lightblue;
width: -moz-min-content; /* Firefox */
width: -webkit-min-content; /* Chrome */
}
<p class="minblue">Die Mozilla Community produziert tolle Software.</p>
Spezifikationen
Spezifikation | Status | Kommentar |
---|---|---|
CSS Basic Box Model Die Definition von 'width' in dieser Spezifikation. |
Anwärter Empfehlung | Fügt die Schlüsselwörter max-content , min-content , available , fit-content , border-box und content-box hinzu. |
CSS Transitions Die Definition von 'width' in dieser Spezifikation. |
Arbeitsentwurf | Listet width als animierbar. |
CSS Level 2 (Revision 1) Die Definition von 'width' in dieser Spezifikation. |
Empfehlung | Präzisiert die Art von Elementen, auf die die Eigenschaft angewendet werden kann. |
CSS Level 1 Die Definition von 'width' in dieser Spezifikation. |
Empfehlung | Ursprüngliche Definition |
Browser Kompatibilität
BCD tables only load in the browser
Siehe auch
- Boxmodell,
height
,box-sizing
,min-width
undmax-width