Szerokość CSS Właściwość
Przykład
Ustaw szerokość trzech elementów <div>:
div.a {
width: auto;
border: 1px
solid black;
}
div.b {
width: 150px;
border: 1px solid black;
}
div.c {
width:
50%;
border: 1px solid black;
}
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Właściwość width
ustawia szerokość elementu.
Szerokość elementu nie obejmuje dopełnienia, obramowań ani marginesów!
Uwaga: Właściwości min-width i
max-width zastępują tę width
właściwość.
Domyślna wartość: | automatyczny |
---|---|
Dziedziczny: | nie |
Animowalny: | tak. Przeczytaj o animacji |
Wersja: | CSS1 |
Składnia JavaScript: | obiekt .style.width="500px" |
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
Property | |||||
---|---|---|---|---|---|
width | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Składnia CSS
width: auto|value|initial|inherit;
Wartości nieruchomości
Value | Description | Play it |
---|---|---|
auto | Default value. The browser calculates the width | |
length | Defines the width in px, cm, etc. Read about length units | |
% | Defines the width in percent of the containing block | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Więcej przykładów
Przykład
Ustaw szerokość elementu <img> za pomocą wartości procentowej:
img {
width: 50%;
}
Przykład
Ustaw szerokość elementu <input type="text"> na 100px. Jednak, gdy zostanie wyostrzony, spraw, aby był szeroki na 250 pikseli:
input[type=text] {
width: 100px;
}
input[type=text]:focus {
width: 250px;
}
Powiązane strony
Samouczek CSS: wysokość i szerokość CSS
Samouczek CSS: model Box CSS
Odniesienie CSS: właściwość wysokości
Dokumentacja HTML DOM: właściwość szerokości