Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

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.

CSS-Eigenschaft: width
KurzbeschreibungWerteStandardwertKategorieHinweis
Breite
  • <length>
  • <percentage>
  • auto
  • inherit
auto
Allgemein:
Ausmaße (Höhen und Breiten)
CSS 2.1:
Visual formatting model details
CSS 3:
Basic Box Model
 

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.
Browserunterstützung von width
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS21
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
j
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
j

Weiterführende Informationen zu width:

  • letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
    widows


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!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 01. 04. 2017
Render Time: 6.474 sec.

Browser-Marktanteile