Rozmiar pudełka - CSS-Tricks

Anonim

box-sizingNieruchomość w CSS kontroluje jak model box jest obsługiwane dla elementu to dotyczy.

.module ( box-sizing: border-box; )

Jednym z bardziej powszechnych sposobów jej użycia jest zastosowanie go do wszystkich elementów na stronie, w tym pseudoelementów:

*, *::before, *::after ( box-sizing: border-box; )

Nazywa się to często „uniwersalnym wymiarowaniem pudełka” i jest to dobry sposób na pracę! widthUstawiony (dosłowny) to szerokość, którą otrzymujesz, bez konieczności wykonywania obliczeń mentalnych i zarządzania złożonością wynikającą z szerokości, które pochodzą z wielu właściwości. Mamy tu nawet dzień świadomości rozmiaru pudełka.

Wartości

  • content-box: domyślny. Wartości szerokości i wysokości dotyczą tylko zawartości elementu. Wypełnienie i obramowanie są dodawane na zewnątrz pudełka.
  • padding-box: Wartości szerokości i wysokości dotyczą zawartości elementu i jego dopełnienia. Obramowanie jest dodawane na zewnątrz pudełka. Obecnie tylko Firefox obsługuje tę padding-boxwartość.
  • border-box: Wartości szerokości i wysokości dotyczą zawartości, dopełnienia i obramowania.
  • inherit: dziedziczy rozmiar pudełka elementu nadrzędnego.

Przykład

Ten przykładowy obraz porównuje domyślny content-box(na górze) z border-box(na dole):

Czerwona linia między obrazami reprezentuje wartość szerokości elementów. Zwróć uwagę, że element z wartością domyślną box-sizing: content-box;przekracza zadeklarowaną szerokość, gdy dopełnienie i obramowanie są dodawane na zewnątrz pola zawartości, podczas gdy element z box-sizing: border-box;zastosowaną wartością całkowicie mieści się w zadeklarowanej szerokości.

Korzystanie z rozmiaru pudełka

Powiedzmy, że ustawiłeś element na width: 100px; padding: 20px; border: 5px solid black;. Domyślnie otrzymane pole ma szerokość 150 pikseli. Dzieje się tak, ponieważ domyślny model rozmiaru pola to content-box, który stosuje deklarowaną szerokość elementu tylko do jego zawartości, umieszczając dopełnienie i obramowanie poza ramką elementu. To skutecznie zwiększa ilość miejsca, jaką zajmuje element.

Jeśli zmienisz box-sizingto padding-box, wypełnienie zostanie wstawione do pudełka elementu. Wtedy pudełko miałoby szerokość 110 pikseli, z wypełnieniem 20 pikseli po wewnętrznej stronie i 10 pikselami krawędzi na zewnątrz. Jeśli chcesz umieścić wyściółkę i obramowanie wewnątrz pudełka, możesz użyć border-box. Ramka miałaby wówczas szerokość 100 pikseli - 10 pikseli obramowania i 20 pikseli wypełnienia są umieszczane wewnątrz ramki elementu.

Próbny

Zobacz porównanie wielkości pudełek wartości wielkości pudełek przez CSS-Tricks (@ css-tricks) w CodePen.

Związane z

  • width
  • height
  • padding
  • border

Wsparcie przeglądarki

Chrom Safari Firefox Opera TO ZNACZY Android iOS
Dowolny * † 3 * † 1 ‡ 7 * 8 * 2,1 * † Dowolny *

* padding-boxnieobsługiwane

† starsze wersje wymagają -webkitprefiksu (Chrome 1-9, Safari 3-5, Android 2.1-3.x)

‡ -mozprefiks wymagany do wersji 28, bez prefiksu od 29.