Model pudełkowy

The CSS Podcast - 001: The Box Model

Załóżmy, że masz taki fragment kodu HTML:

<p>I am a paragraph of text that has a few words in it.</p>

Następnie piszesz dla niego ten kod CSS:

p {
  width: 100px;
  height: 50px;
  padding: 20px;
  border: 1px solid;
}

Treść ma szerokość 142 pikseli zamiast określonych 100 pikseli i wychodzi poza element. Dlaczego?

Model pudełkowy to podstawowa koncepcja CSS. Zrozumienie, jak działa model pudełkowy, jak wpływają na niego inne aspekty CSS i co najważniejsze, jak można go kontrolować, może pomóc w pisaniu bardziej przewidywalnego kodu CSS.

Zrozumienie modelu pudełkowego CSS pomoże Ci dowiedzieć się, dlaczego Twoje treści nie mieszczą się w elemencie.

Pamiętaj, że wszystko, co jest wyświetlane przez CSS, to pole, nawet jeśli jest to tylko tekst lub ma border-radius, które sprawia, że wygląda jak okrąg.

Treść i rozmiar

Pola zachowują się różnie w zależności od wartości display, ustawionych wymiarów i zawartości. Mogą to być zwykłe teksty lub kolejne pola wygenerowane przez elementy podrzędne. W obu przypadkach zawartość domyślnie wpływa na rozmiar pola.

Możesz to kontrolować za pomocą rozmiaru zewnętrznego lub rozmiaru wewnętrznego, aby przeglądarka podejmowała decyzje na podstawie rozmiaru treści.

Oto podstawowa demonstracja, która wyjaśnia różnicę:

Gdy pole ma rozmiar zewnętrzny, istnieje limit ilości treści, które można dodać, zanim przepełnią pole. Spowoduje to przepełnienie słowa „awesome”.

W wersji demonstracyjnej w polu o stałych wymiarach i grubej ramce znajduje się tekst „CSS is awesome”. Ponieważ pole ma określoną szerokość, jego rozmiar jest określany zewnętrznie. Oznacza to, że kontroluje rozmiar treści podrzędnych. Słowo „awesome” jest jednak za długie, aby zmieścić się w tym polu, więc wykracza poza pole obramowania elementu nadrzędnego (więcej informacji na ten temat znajdziesz w dalszej części artykułu). Aby zapobiec przepełnieniu, możesz pozwolić, aby rozmiar pola był określany wewnętrznie, nie ustawiając szerokości lub ustawiając w tym przypadku wartość width na min-content. Słowo kluczowe min-content informuje pole, że ma mieć szerokość równą minimalnej szerokości wewnętrznej treści (słowa „awesome”). Dzięki temu ramka idealnie dopasuje się do tekstu.

Oto bardziej złożony przykład, który pokazuje wpływ różnych rozmiarów na rzeczywistą treść:

Rozmiar zewnętrzny umożliwia kontrolowanie rozmiaru elementu. Rozmiar wewnętrzny zapobiega przepełnieniu tekstu.

Włącz i wyłącz rozmiarowanie wewnętrzne, aby zobaczyć, jak rozmiarowanie zewnętrzne daje większą kontrolę, a rozmiarowanie wewnętrzne – większą kontrolę nad treścią. Aby zobaczyć efekty, dodaj do karty kilka zdań tekstu. Gdy ten element ma rozmiar zewnętrzny, istnieje limit ilości treści, które możesz dodać, zanim nastąpi przepełnienie, ale nie dzieje się tak, gdy włączony jest rozmiar wewnętrzny.

Domyślnie ten element ma ustawione wartości width i height po 400px. Te wymiary wyznaczają ścisłe granice wszystkich elementów wewnątrz elementu, które są respektowane, chyba że treść jest za duża na to pole. Możesz to sprawdzić, zmieniając podpis pod zdjęciem kwiatka na coś, co przekracza wysokość pola.

Kluczowe pojęcie: przepełnienie występuje, gdy zawartość jest zbyt duża, aby zmieścić się w pudełku, w którym się znajduje. Za pomocą właściwości overflow możesz zarządzać sposobem, w jaki element obsługuje przepełnienie treści.

Przełączenie na rozmiar wewnętrzny pozwala przeglądarce podejmować decyzje na podstawie rozmiaru treści w pudełku. Dzięki temu przepełnienie jest znacznie mniej prawdopodobne, ponieważ pole zmienia rozmiar wraz z zawartością.

Pamiętaj, że rozmiar wewnętrzny jest domyślnym zachowaniem przeglądarki i zwykle zapewnia znacznie większą elastyczność niż rozmiar zewnętrzny.

Obszary modelu pudełkowego

Pudełka składają się z różnych obszarów modelu pudełkowego, z których każdy pełni określoną funkcję.

Diagram przedstawiający 4 główne obszary modelu pudełkowego: pole treści, pole dopełnienia, pole obramowania i pole marginesu
Cztery główne obszary modelu pudełkowego: pole treści, pole dopełnienia, pole obramowania i pole marginesu.

Pole treści to obszar, w którym znajdują się treści. Treści mogą kontrolować rozmiar elementu nadrzędnego, więc jest to zwykle obszar o najbardziej zmiennym rozmiarze.

Pole dopełnienia otacza pole treści i jest przestrzenią utworzoną przez właściwość padding. Ponieważ dopełnienie znajduje się wewnątrz pola, w utworzonej przez nie przestrzeni widać tło pola. Jeśli w przypadku pola ustawiono reguły przepełnienia, np. overflow: auto lub overflow: scroll, paski przewijania również zajmują to miejsce.

Paski przewijania znajdują się w obszarze dopełnienia.

Pole obramowania otacza pole dopełnienia, a jego przestrzeń jest określana przez wartość border, która tworzy wizualną ramkę elementu. Krawędź obramowania elementu to granica tego, co możesz zobaczyć.

Ostatni obszar, margines, to przestrzeń wokół ramki, określona przez regułę margin ramki. Przestrzeń tę zajmują też właściwości takie jak outline i box-shadow, ponieważ są one rysowane na elemencie i nie wpływają na rozmiar pola. Zmiana outline-width 200px na polu nie powoduje zmiany niczego wewnątrz krawędzi obramowania.

Szerokie obramowanie nie wpływa na rozmiar pozostałej części elementu.

Przydatna analogia

Model pudełkowy jest dość skomplikowany, więc aby ułatwić Ci zrozumienie tego, czego się dotychczas nauczyłeś, posłużymy się analogią.

Trzy ramki na zdjęcia.
Model pudełkowy zilustrowany za pomocą fizycznych ramek na zdjęcia.

Na tym schemacie widzisz 3 ramki na zdjęcia zamontowane obok siebie na ścianie. Elementy obrazu w ramce odpowiadają modelowi pudełkowemu w ten sposób:

  • Pole treści to grafika.
  • Padding box to biały karton montażowy między ramą a dziełem sztuki.
  • Ramka to obramowanie, które dosłownie otacza grafikę.
  • Margines to przestrzeń między ramkami.
  • Cień zajmuje tę samą przestrzeń co pole marginesu.

Debugowanie modelu pudełkowego

Narzędzia dla programistów w przeglądarce umożliwiają wizualizację obliczeń modelu pudełkowego wybranego elementu. Dzięki temu możesz lepiej zrozumieć, jak działa model pudełkowy i jak wpływa na witrynę, nad którą pracujesz.

Aby wypróbować tę funkcję w Chrome:

  1. Otwórz Narzędzia deweloperskie.
  2. Wybierz element.
  3. Wyświetl debuger modelu pudełkowego.
Debuger modelu pudełkowego w przypadku wersji demonstracyjnej soutline.

Kontrolowanie modelu pudełkowego

Aby dowiedzieć się, jak sterować modelem pudełkowym, musisz najpierw zrozumieć, co dzieje się w przeglądarce.

Każda przeglądarka stosuje arkusz stylów klienta użytkownika do dokumentów HTML. Arkusz stylów określa wygląd i działanie elementów, jeśli nie mają one zdefiniowanego CSS. Arkusz stylów CSS klienta użytkownika różni się w zależności od przeglądarki, ale każda przeglądarka ma ustawienia domyślne, które ułatwiają czytanie treści.

Arkusz stylów klienta użytkownika ustawia domyślną wartość elementów, które przyjmują wartość display. Na przykład domyślna wartość atrybutu display elementu <div> to block, element <li> ma domyślną wartość atrybutu display równą list-item, a element <span> ma domyślną wartość atrybutu display równą inline.

Element inline ma margines bloku, ale inne elementy go nie uwzględniają. W przypadku elementu inline-block inne elementy uwzględniają margines bloku, ale pierwszy element zachowuje większość tych samych właściwości, które miał jako element inline. Element block domyślnie wypełnia dostępną przestrzeń w linii, natomiast elementy inline i inline-block mają rozmiar odpowiadający ich zawartości.

Arkusz stylów klienta użytkownika określa też domyślne wartości dla właściwości box-sizing, która informuje pole, jak obliczyć jego rozmiar. Domyślnie wszystkie elementy mają wartość box-sizing: content-box;. Oznacza to, że gdy ustawisz wymiary, takie jak width i height, będą one dotyczyć pola treści. Jeśli następnie ustawisz wartości padding i border, zostaną one dodane do rozmiaru pola treści.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o właściwościach, na które wpływa rozmiar modelu pudełkowego.

.my-box {
  width: 200px;
  border: 10px solid;
  padding: 20px;
}

Jak szeroki będzie .my-box?

200 piks.
Domyślna wartość właściwości box-sizing to content-box, więc do szerokości dodawane są dopełnienie i obramowania. 200px byłoby prawidłowe, gdyby w polu znajdowała się wartość box-sizing: border-box.
260 pikseli
Domyślny model pudełkowy to content-box, co oznacza, że do ogólnego pudełka dodawane są dopełnienie i obramowanie.

Rzeczywista szerokość tego pola to 260 pikseli. Ponieważ CSS używa domyślnego box-sizing: content-box, zastosowana szerokość to szerokość treści, do której po obu stronach dodawane są padding i border. 200 pikseli na treść + 40 pikseli na dopełnienie + 20 pikseli na obramowanie daje łączną widoczną szerokość 260 pikseli.

Możesz to zmienić, określając border-box rozmiar:

.my-box {
  box-sizing: border-box;
    width: 200px;
    border: 10px solid;
    padding: 20px;
}

Ten alternatywny model pudełkowy nakazuje CSS zastosowanie width do pola obramowania, a nie do pola treści. Oznacza to, że nasze border i padding są wypychane, więc gdy ustawisz .my-box na 200px, w rzeczywistości będzie ono miało szerokość 200px.

Zobacz, jak to działa, w poniższej interaktywnej wersji demonstracyjnej. Gdy przełączysz wartość box-sizing, niebieski obszar pokaże, które style CSS są stosowane wewnątrz pola.

Porównaj efekty rozmiaru content-box i border-box.
*,
*::before,
*::after {
  box-sizing: border-box;
}

Ta reguła CSS wybiera każdy element w dokumencie oraz każdy pseudoelement ::before i ::after i stosuje box-sizing: border-box. Oznacza to, że każdy element korzysta teraz z tego alternatywnego modelu pudełkowego.

Alternatywny model pudełkowy może być bardziej przewidywalny, dlatego deweloperzy często dodają tę regułę do resetów i normalizatorów, takich jak ten.

Zasoby

Arkusze stylów klienta użytkownika