Model pudełkowy — CSS

Każdy element zajmuje określony obszar strony.

Jak to działa?

Na model pudełkowy składają się content, padding, border i margin. box-sizing: border-box sprawia, że zadana szerokość obejmuje też padding i border.

Przykład 1 — poznaj zapis

* { box-sizing: border-box; }
.card {
  width: 20rem;
  padding: 1.5rem;
  border: 0.1rem solid #ddd;
  margin: 1rem;
}

Widoczna szerokość .card wyniesie 20rem (nie licząc marginesu).

Przeczytaj kod linijka po linijce

.card {Wybieramy elementy, które mają otrzymać podane style.
width: 20rem;Kontrolujemy wymiary elementu.
padding: 1.5rem;Ustawiamy odstępy elementów.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Karta ma określoną szerokość, padding, obramowanie i margines.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Przykład 2 — podobny problem, inne dane

Teraz przyjrzyj się drugiemu przykładowi. Zwróć uwagę na to, co zmieniło się w kodzie, a co w wyniku. Spróbuj przewidzieć rezultat przed przeczytaniem odpowiedzi.

.box { box-sizing: border-box; width: 10rem; padding: 1rem; }

Wynik drugiego przykładupo uruchomieniu przykładu

Cała szerokość pudełka, łącznie z paddingiem, wynosi 10rem.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Sprawdź, czy rozumiesz

Wróć do pierwszego przykładu, zmień jedną wartość i spróbuj samodzielnie przewidzieć wynik. Następnie uruchom kod i porównaj rezultat. W ten sposób nauczysz się nie tylko przepisywać instrukcje, ale rozumieć ich działanie.

Spróbuj samodzielnie

Zwiększ padding, ale nie zmieniaj całkowitej szerokości karty.