CSS-Eigenschaft: width, Kategorien: Ausmaße (Höhen und Breiten) (allgemein), Visual formatting model details (CSS 2.1), Basic Box Model (CSS 3)
Breite
Bestimmt die Breite eines HTML-Block-Elements.
| Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
|---|---|---|---|---|
| Breite |
| auto |
|
Verwandte Eigenschaften aus der Kategorie: Ausmaße (Höhen und Breiten) (allgemein), Visual formatting model details (CSS 2.1), Basic Box Model (CSS 3):
- box-sizing
- clear
- display
- float
- height
- line-height
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- marquee-direction
- marquee-play-count
- marquee-speed
- marquee-style
- max-height
- max-width
- min-height
- min-width
- overflow
- overflow-style
- overflow-x
- overflow-y
- padding
- padding-bottom
- padding-left
- padding-right
- padding-top
- rotation
- rotation-point
- vertical-align
- visibility
- Aktuelle Seite: width
Folgendes ist beim Einsatz von width zu beachten:
- Standardwert von width ist auto. Das bedeutet, bei Block-Elementen ist das 100% des verfügbaren Platz (im Gegensatz zu height, dort hängt die Anweisung auto von der Menge des Inhalt ab). Bei Inline-Elementen greift width nicht, dort hängt die Breite von der Menges des Inhalts ab.
- width wirkt nur bei Block-Elementen. Sollen Inline-Elemente eine Breite bekommen, müssen diese über display: block als solche konfiguriert werden. Ebenfalls verlieren Block-Elemente ihre Fähigkeit, eine Breite einzunehmen, wenn sie durch display: inline als Inline-Element deklariert sind.
- Bei Angabe eines %-Wertes benötigt width eine Bezugsbreite, eines der Elternelemente muss eine Breite haben, damit dem betreffenden Element selber eine Breite zugewiesen werden kann.
- Achtung, 100% der Breite sind 100% des Elternelements. Außenabstände (margin), Innenabstände (padding) und Rahmenbreite (border) werden je nachdem der Breite eines Elements hinzugefügt. Genaueres findet man unter der Beschreibung des Box-Mobell.
 Firefox |  Chrome |  Internet Explorer |  Safari |  Opera |
|||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| CSS21 |
|
|
|
|
| ||||||||||||||||||||||||||||||||||||||||||
Weiterführende Informationen zu width:
- W3C Spezifikation:
http://www.w3.org/TR/CSS21/visudet.html#propdef-width
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
widows - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
word-break
Beispiele
HTML:
<div>
<p>width / length in PX</p>
</div>CSS:
div {
border: 1px solid black;
width: auto;
height: 150px;
background-image: url('/img/gitter.png');
}
/* Zur Hervorhebung ist das äußere DIV auf eine Höhe von 150px gesetzt und mit einem Gitter als Hintergrundgrafik hinterlegt. */
div p {
width: 300px;
background-color: #FF7700;
margin: 0px;
}
/* Hier die genaue Breite von 300px. */Beispiel Nr. 1 So sieht's aus:
width / length in PX
HTML:
<div>
<p class="doPerc">width / percentage</p>
</div>CSS:
div p.doPerc {
width: 50%;
}
/* Eine %-Angabe bezieht sich auf eine definierte Breite des nächst höheren Elternelement. */Beispiel Nr. 2 So sieht's aus:
width / percentage
HTML:
<div>
<p class="doEm">width / length in EM</p>
</div>CSS:
div p.doEm {
width: 15em;
}
/* Eine Angabe in EM bezieht sich auf die Schriftgröße. */Beispiel Nr. 3 So sieht's aus:
width / length in EM
HTML:
<div>
<span>SPAN</span>
</div>CSS:
div span {
width: 250px;
background-color: #00A4FF;
}
/* Inline-Elemente haben nicht die Fähigkeit, eine Breite anzunehmen... */Beispiel Nr. 4 So sieht's aus:
SPAN
HTML:
<div>
<span class="doBlock">SPAN</span>
</div>CSS:
div span.doBlock {
display: block;
}
/* ...es sei denn, sie werden als Block-Element deklariert. */Beispiel Nr. 5 So sieht's aus:
SPAN
HTML:
<div>
<p class="doInline">display: inline;</p>
</div>CSS:
div p.doInline {
display: inline;
width: 300px !important;
}
/* Werden Block-Elemente als Inline-Element deklariert, verlieren sie die Eigenschaft, eine Breite anzunehmen. Auch ein !important ändert nichts daran. */Beispiel Nr. 6 So sieht's aus:
display: inline;
HTML:
<div class="do250Perc">
<p class="do100Perc">100% width / percentage</p>
</div>CSS:
div.do250Perc {
width: 250px;
}
div.do250Perc p.do100Perc {
width: 100%;
margin: 20px;
border: 20px solid red;
background-color: #ff0;
padding: 20px;
)
/* Hier wird deutlich, dass 100% des Elements durch Rahmen, Außen- und Innenabstände mehr werden als 100%. Das DIV mit dem roten Rahmen ragt über das Elternelement hinaus. */Beispiel Nr. 7 So sieht's aus:
100% width / percentage
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!