Beispiel
Stellen Sie die Höhe und Breite eines <p> Element:
p.ex
{
height: 100px;
width: 100px;
}
Versuch es selber " Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.
Definition und Verwendung
Die Breite Eigenschaft setzt die Breite eines Elements.
Note: Die Breite Eigenschaft enthält keine Polsterung, Grenzen oder Ränder; es setzt die Breite des Bereichs innerhalb der Polsterung, Rahmen und Rand des Elements!
Note: Die min-width und max-width Eigenschaften Breite außer Kraft setzen.
| Standardwert: | auto |
|---|---|
| Vererbt: | no |
| Anima: | yes. Read about animatable Try it |
| Version: | CSS1 |
| JavaScript-Syntax: | object .style.width="500px" Try it |
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
| Eigentum | |||||
|---|---|---|---|---|---|
| width | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
CSS-Syntax
width: auto|value|initial|inherit;Eigenschaftswerte
| Wert | Beschreibung | Spiel es |
|---|---|---|
| auto | Standardwert. Der Browser berechnet die Breite | Spiel es " |
| length | Legt die Breite in Pixel, cm usw. | Spiel es " |
| % | Legt die Breite in Prozent des umschließenden Blocks | Spiel es " |
| initial | Setzt diese Eigenschaft auf den Standardwert. Lesen Sie mehr über Anfangs | Spiel es " |
| inherit | Erbt diese Eigenschaft von seinem übergeordneten Element. Lesen Sie mehr über erben |
Mehr Beispiele
Beispiel
Stellen Sie die Breite eines <img> Element einen Prozentwert mit:
img {
width: 50%;
} Versuch es selber " Beispiel
Stellen Sie die Breite eines <input type = "text"> Element 100px. Allerdings, wenn es Fokus erhält, machen es 250px breit:
input[type=text] {
width: 100px;
}
input[type=text]:focus {
width: 250px;
} Versuch es selber " Verwandte Seiten
CSS Tutorial: CSS Dimension
CSS Tutorial: CSS Box - Modell
CSS - Referenz: height property
HTML - DOM - Referenz: width property