Atrybut box-sizing CSS

Definicja i użycie

Atrybut box-sizing pozwala określić, w jaki sposób określony element ma pasować do danej obszaru.

Na przykład, jeśli chcesz umieścić dwa ramki obok siebie, można ustawić box-sizing na "border-box". To pozwala przeglądarce wyświetlić ramki z określoną szerokością i wysokością, umieszczając boki i wewnętrzne marginesy w ramce.

Zobacz również:

Tutorial CSS3:Interfejs użytkownika CSS3

Podręcznik HTML DOM:Atrybut boxSizing

Przykład

Definiuje dwa równoległe ramki z bokami:

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

Spróbuj sam

Na dole strony znajduje się więcej przykładów.

Gramatyka CSS

box-sizing: content-box|border-box|inherit;

Wartość atrybutu

Wartość Opis
content-box

To jest zachowanie szerokości i wysokości określone przez CSS2.1.

Szerokość i wysokość są zastosowane do ramki zawartości elementu.

Marginesy i boki elementu są rysowane poza szerokością i wysokością.
border-box

Szerokość i wysokość określone dla elementu określają ramkę elementu.

To znaczy, że jakiekolwiek wewnętrzne marginesy i boki określone dla elementu będą rysowane w ustawionych szerokości i wysokości.

Szerokość i wysokość zawartości można uzyskać, odjąc marginesy i boki od ustawionych szerokości i wysokości.
inherit Definiuje, że wartość właściwości box-sizing powinna być dziedziczona od elementu nadrzędnego.

Szczegółowe informacje techniczne

Domyślna wartość: content-box
Inheredność: nie
Wersja: CSS3
Gramatyka JavaScript: object.style.boxSizing="border-box"

Obsługa przeglądarek

Liczby w tabeli wskazują pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Liczby z -webkit- lub -moz- jako prefiksem oznaczają pierwszą wersję używaną.

Chrome IE / Edge Firefox Safari Opera
10.0
4.0 -webkit-		 8.0 29.0
2.0 -moz-		 5.1
3.2 -webkit-		 9.5