Model pudełkowy

Podcast CSS – 001: model pudełkowy

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 do niego taki kod CSS:

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

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

Model pudełkowy jest podstawą CSS. Zrozumienie, jak działa model pudełkowy, jak wpływają na niego inne aspekty CSS i, co ważne, jak go kontrolować, może pomóc w pisaniu bardziej przewidywalnego kodu CSS.

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

Pamiętaj, że wszystko, co jest wyświetlane przez CSS, jest pudełkiem, nawet jeśli jest to tylko tekst lub ma właściwość border-radius, która sprawia, że wygląda jak okrąg.

Treść i rozmiar

Pudełka zachowują się inaczej w zależności od wartości display, ustawionych wymiarów i zawartości. Treść może być zwykłym tekstem lub większą liczbą pudełek wygenerowanych przez elementy podrzędne. W każdym przypadku treść domyślnie wpływa na rozmiar pudełka.

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

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

Gdy pudełko ma rozmiar zewnętrzny, istnieje limit ilości treści, którą można dodać, zanim przekroczy ono rozmiar pudełka. Powoduje to, że słowo „awesome” wychodzi poza pudełko.

Prezentacja zawiera słowa „CSS is awesome” w pudełku o stałych wymiarach i grubym obramowaniu. Ponieważ pudełko ma określoną szerokość, jego rozmiar jest określony zewnętrznie. Oznacza to, że kontroluje rozmiar treści podrzędnych. Słowo „awesome” jest jednak zbyt duże dla pudełka, więc wychodzi poza obszar obramowania elementu nadrzędnego (więcej informacji na ten temat znajdziesz poniżej). Aby zapobiec przepełnieniu, możesz ustawić rozmiar wewnętrzny pudełka, nie ustawiając szerokości lub, w tym przypadku, ustawiając width na min-content. Słowo kluczowe min-content informuje pudełko, że ma mieć szerokość tylko taką jak wewnętrzna minimalna szerokość jego zawartości (słowo „awesome”). Dzięki temu pudełko idealnie dopasowuje 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 pozwala kontrolować rozmiar elementu. Rozmiar wewnętrzny zapobiega przepełnieniu tekstu.

Włączaj i wyłączaj rozmiar wewnętrzny, aby zobaczyć, jak rozmiar zewnętrzny daje większą kontrolę, a rozmiar wewnętrzny – 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órą można dodać, zanim przekroczy ona rozmiar pudełka, ale nie dzieje się tak, gdy włączony jest rozmiar wewnętrzny.

Domyślnie ten element ma ustawioną width i height na 400px. Te wymiary wyznaczają ścisłe granice wszystkiego, co znajduje się w elemencie, które są respektowane, chyba że treść jest zbyt duża dla pudełka. Możesz to zobaczyć w praktyce, zmieniając podpis pod zdjęciem kwiatka na coś, co przekracza wysokość pudełka.

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

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ż rozmiar pudełka zmienia się wraz z jego 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, które pełnią określone funkcje.

Diagram 4 głównych obszarów modelu pudełkowego.
4 główne obszary modelu pudełkowego: obszar treści, obszar dopełnienia, obszar obramowania i obszar marginesu.

Obszar treści to obszar, w którym znajduje się treść. Treść może kontrolować rozmiar elementu nadrzędnego, dlatego jest to zwykle obszar o najbardziej zmiennym rozmiarze.

Obszar dopełnienia otacza obszar treści i jest przestrzenią utworzoną przez właściwość padding. Ponieważ dopełnienie znajduje się wewnątrz pudełka, w utworzonej przez nie przestrzeni widoczne jest tło pudełka. Jeśli w pudełku ustawione są reguły przepełnienia, np. overflow: auto lub overflow: scroll, paski przewijania również zajmują tę przestrzeń.

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

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

Ostatni obszar, obszar marginesu, to przestrzeń wokół pudełka, określona przez regułę margin pudełka. Właściwości takie jak outline i box-shadow również zajmują tę przestrzeń, ponieważ są rysowane na wierzchu elementu i nie wpływają na rozmiar pudełka. Zmiana outline-width na 200px w pudełku nie zmienia niczego wewnątrz krawędzi obramowania.

Szeroki kontur nie wpływa na rozmiar pozostałej części elementu.

Przydatna analogia

Model pudełkowy jest trudny do zrozumienia, dlatego przedstawiamy analogię do tego, czego udało Ci się do tej pory dowiedzieć.

Ilustracja modelu pudełkowego z ramką na zdjęcia.

Na tym diagramie widzisz 3 ramki na zdjęcia zamontowane obok siebie na ścianie. Elementy oprawionego obrazu odpowiadają modelowi pudełkowemu w następujący sposób:

  • Obszar treści to grafika.
  • Obszar dopełnienia to biała płyta montażowa między ramką a grafiką.
  • Obszar obramowania to ramka, która stanowi dosłowną ramkę dla grafiki.
  • Obszar marginesu to przestrzeń między ramkami.
  • Cień zajmuje tę samą przestrzeń co obszar marginesu.

Debugowanie modelu pudełkowego

Narzędzia deweloperskie przeglądarki umożliwiają wizualizację obliczeń modelu pudełkowego wybranego pudełka, co może pomóc w zrozumieniu, jak działa model pudełkowy i jak wpływa na witrynę, nad którą pracujesz.

Aby wypróbować to w Chrome:

  1. Otwórz Narzędzia deweloperskie.
  2. Wybierz element.
  3. Pokaż debuger modelu pudełkowego.
Debuger modelu pudełkowego w prezentacji soutline.

Kontrolowanie modelu pudełkowego

Aby zrozumieć, jak kontrolować model pudełkowy, musisz najpierw dowiedzieć się, 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, jak elementy powinny wyglądać i się zachowywać, jeśli nie mają zdefiniowanego kodu CSS. Kod CSS w arkuszach stylów 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 wartość domyślną dla elementów, które przyjmują display. Na przykład domyślna wartość display elementu <div> to block, element <li> ma domyślną wartość display równą list-item, a element <span> ma domyślną wartość display równą inline.

Element inline ma margines bloku, ale inne elementy go nie respektują. W przypadku inline-block inne elementy respektują margines bloku, ale pierwszy element zachowuje większość tych samych zachowań, które miał jako element inline. Element block domyślnie wypełnia dostępną przestrzeń w wierszu, natomiast inline i inline-block elementy są tylko tak duże jak ich zawartość.

Arkusz stylów klienta użytkownika ustawia też wartości domyślne dla box-sizing, który informuje pudełko, jak obliczyć jego rozmiar. Domyślnie wszystkie elementy mają ustawioną wartość box-sizing: content-box;. Oznacza to, że gdy ustawiasz wymiary takie jak width i height, te wymiary dotyczą obszaru treści. Jeśli następnie ustawisz padding i border, te wartości zostaną dodane do rozmiaru obszaru treści.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat właściwości wpływających na rozmiar modelu pudełkowego.

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

Jaką szerokość będzie miał element .my-box?

200 pikseli
Ponieważ domyślna wartość box-sizing to content-box, do szerokości dodawane są dopełnienie i obramowanie. Wartość 200px byłaby prawidłowa, gdyby pudełko miało box-sizing: border-box.
260 pikseli
Domyślny rozmiar pudełka to content-box, co oznacza, że dopełnienie i obramowanie są dodawane do całego pudełka.

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

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

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

Ten alternatywny model pudełkowy informuje CSS, aby zastosował width do obszaru obramowania zamiast do obszaru treści. Oznacza to, że nasze border i padding są wsuwane, więc gdy ustawisz szerokość .my-box na 200px, będzie on renderowany jako 200px.

Zobacz, jak to działa, w tej interaktywnej prezentacji. Gdy przełączasz wartość box-sizing, niebieski obszar pokazuje, który kod CSS jest stosowany wewnątrz pudełka.

Porównaj efekty rozmiarów 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 używa teraz tego alternatywnego modelu pudełkowego.

Ponieważ alternatywny model pudełkowy może być bardziej przewidywalny, deweloperzy często dodają tę regułę do resetów i normalizatorów, takich jak A (more) Modern CSS Reset.

Zasoby

Arkusze stylów klienta użytkownika

Dalej
Selektory