CSS Box Sizing

CSS Box Sizing

CSS box-sizing Atrybut pozwala nam uwzględnić wewnętrzne marginesy (wypełnienie) i ramki w całkowitej szerokości i wysokości elementu.

Jeśli nie określisz atrybutu CSS box-sizing

Domyślnie, szerokość i wysokość elementu są obliczane w ten sposób:

  • width + padding + border = rzeczywista szerokość elementu
  • height + padding + border = rzeczywista wysokość elementu

To oznacza: gdy ustawiasz szerokość/wysokość elementu, element zazwyczaj wygląda większy niż ustawiasz (ponieważ ramki i wewnętrzne marginesy są dodawane do określonej szerokości/wysokości elementu).

Poniższy obraz pokazuje dwa elementy <div> o tym samym określonym szerokości i wysokości:

Ten div jest mniejszy
(szerokość wynosi 300px, wysokość 100px).
Ten div jest większy
(szerokość również wynosi 300px, wysokość 100px).

Powyższe dwa elementy <div> mają różne rozmiary w wyniku końcowym (ponieważ div2 ma określone wewnętrzne marginesy):

Przykład

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue; 
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

Spróbuj sam

box-sizing Atrybut rozwiązuje ten problem.

Jeśli używasz atrybutu CSS box-sizing

box-sizing Atrybut pozwala nam uwzględnić wewnętrzne marginesy i ramki w całkowitej szerokości i wysokości elementu.

Jeśli ustawisz atrybut na elemencie box-sizing: border-box;Wtedy szerokość i wysokość będą obejmować wewnętrzne marginesy i ramki:

Teraz dwa divy mają tę samą wielkość!
Hooray!

Ten przykład jest podobny do poprzedniego, oba elementy <div> mają ustawione box-sizing: border-box;:

Przykład

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

Spróbuj sam

Z powodu użycia box-sizing: border-box; efektem, wielu deweloperów chce, aby wszystkie elementy na stronie działały w ten sposób.

Poniższy kod zapewnia, że wszystkie elementy są dostosowywane w bardziej intuicyjny sposób. Wielu przeglądarek już dobrze działa na wielu elementach formularzy z box-sizing: border-box;（ale nie wszystkie - to dlatego input i textarea w width: 100%; wyglądają inaczej）。

Zastosowanie tego do wszystkich elementów jest bezpieczne i rozsądne:

Przykład

* {
  box-sizing: border-box;
}

Spróbuj sam

Atrybut Box Sizing CSS

Atrybut Opis
box-sizing Definiowanie sposobu obliczania szerokości i wysokości elementów: czy powinny zawierać wewnętrzne marginesy (padding) i ramki.