Model pudełkowy CSS: margin, padding, border i display
Wizualizator modelu pudełkowego CSS
Model pudełkowy CSS: margin a padding, border, display | We.Inc
Przesuwaj suwaki treści, padding, border i margin i patrz, jak model pudełkowy rysuje się na nowo, a do tego box-sizing, zapadanie marginesów, style obramowań i wszystkie wartości display porównane na żywo.
Każdy element jest rysowany jako zagnieżdżone prostokąty: treść, potem padding (przestrzeń wewnątrz obramowania, wypełniona tłem), potem border, a na końcu margin (przezroczysta przestrzeń na zewnątrz, która odpycha sąsiadów). Przy box-sizing: border-box ustawiona szerokość obejmuje padding i border, dzięki czemu układy są znacznie bardziej przewidywalne. Właściwość display decyduje o tym, jak pudełka się układają.
Cztery warstwy, od środka na zewnątrz
Warstwa
Co robi
Czy ma tło?
Treść
Zawiera tekst, obrazy i elementy potomne
Tak
Padding
Oddech między treścią a obramowaniem
Tak
Border
Widoczna linia (albo nic) wokół paddingu
Własny kolor obramowania
Margin
Odstęp między tym pudełkiem a sąsiadami
Nie, zawsze przezroczysty
Przesuń cztery suwaki, a diagram, zmierzony rozmiar całkowity i CSS zmienią się razem. Pod wizualizatorem możesz przełączyć box-sizing, zobaczyć, jak dwa marginesy zapadają się w jeden, i porównać block, inline, inline-block, flex, grid i none obok siebie na tych samych trzech elementach.
Ustaw szerokość i wysokość obszaru treści, a potem dodaj suwakami padding, border i margin.
Przełącz box-sizing między content-box a border-box i zobacz, jak zmienia się wyrenderowana szerokość.
Odczytaj całkowitą szerokość i wysokość, jaką element naprawdę zajmuje, łącznie z marginesami.
Skopiuj wygenerowany CSS, a potem przewiń w dół do demonstracji zapadania marginesów i display.
Dodaj *, *::before, *::after { box-sizing: border-box; } na początku każdego arkusza stylów. Większość resetów i frameworków już to robi.
Używaj paddingu, gdy tło lub obszar kliknięcia ma się powiększyć, a marginesu, gdy chcesz tylko odstępu między osobnymi elementami.
W kontenerze flex lub grid zamiast marginesów na dzieciach wybieraj gap. Nigdy nie podwaja się na krawędziach.
Outline rysuje się poza obramowaniem i nie zajmuje miejsca, dlatego pierścienie fokusu używają go zamiast border.
Najczęściej zadawane pytania
Czym różni się margin od paddingu?
Padding leży wewnątrz obramowania, więc wypełnia go tło elementu i jest częścią obszaru klikalnego. Margin leży poza obramowaniem, jest zawsze przezroczysty i tylko oddziela element od innych. Pionowe marginesy między blokami mogą się też zapadać, a padding nigdy się nie zapada.
Dlaczego mój element jest szerszy niż ustawiona szerokość?
Przy domyślnym box-sizing: content-box szerokość dotyczy tylko treści, a padding i border są doliczane. Pudełko 300px z paddingiem 20px i obramowaniem 2px ma po wyrenderowaniu 344px szerokości. Przełącz na box-sizing: border-box, a zostanie 300px, bo treść się zmniejszy.
Kiedy marginesy się zapadają?
Górne i dolne marginesy pudełek blokowych w normalnym przepływie łączą się, gdy się stykają: między rodzeństwem oraz między rodzicem a jego pierwszym lub ostatnim dzieckiem, gdy nie dzieli ich border, padding ani treść inline. Wygrywa większy margines. Marginesy nigdy nie zapadają się w kontenerach flex i grid ani w poziomie.
Czym różni się display: none od visibility: hidden?
display: none całkowicie usuwa element z układu, więc miejsce się zamyka, a czytniki ekranu go pomijają. visibility: hidden zachowuje zarezerwowane miejsce, ale nic nie rysuje, a treść jest też ukryta przed technologiami wspomagającymi. opacity: 0 zachowuje zarówno miejsce, jak i możliwość kliknięcia lub ustawienia fokusu.
Czy mogę ustawić width na elemencie inline?
Nie. Width, height i pionowe marginesy są ignorowane na zwykłym pudełku inline, takim jak span. Pionowy padding jest rysowany, ale nie rozsuwa linii. Zmień go na inline-block albo zrób z rodzica kontener flex, a te rozmiary zaczną działać.
content-box a border-box w liczbach
Przy content-box całkowita szerokość to width plus lewy i prawy padding plus lewe i prawe obramowanie. Margin dochodzi jeszcze na zewnątrz. Tak działał CSS od początku i nadal jest to domyślne zachowanie przeglądarki dla większości elementów.
Przy border-box zapisana szerokość jest mierzona do zewnętrznej krawędzi obramowania. Padding i border zabierają miejsce z obszaru treści, zamiast powiększać pudełko, więc układ dwóch kolumn 50% plus 50% zostaje w jednej linii bez względu na to, ile paddingu dodasz.
Obramowania to więcej niż zwykła linia
Skrót border przyjmuje szerokość, styl i kolor w dowolnej kolejności. Dostępne style to solid, dashed, dotted, double, groove, ridge, inset, outset, none i hidden. Obramowanie ze stylem none ma zerową szerokość bez względu na wpisaną wartość, co zaskakuje osoby ustawiające tylko border-width.
border-radius zaokrągla w obecnych przeglądarkach narożniki obramowania, tła i outline. Jedna wartość zaokrągla wszystkie cztery narożniki; ukośnik ustawia osobne promienie poziome i pionowe dla eliptycznych narożników, a 50% na kwadracie zamienia go w koło.
Jak display zmienia pudełko
Pudełka block zaczynają się od nowej linii i rozciągają na całą szerokość kontenera. Pudełka inline płyną w linii tekstu i ignorują width i height. inline-block płynie jak tekst, ale przyjmuje rozmiary i pionowe marginesy, co przydaje się przy plakietkach i przyciskach.
flex i grid sprawiają, że element na zewnątrz jest blokiem, a w środku kontenerem układu. Jego dzieci przestają zachowywać się jak block lub inline i zamiast tego podlegają regułom flex lub grid, z gap do odstępów. contents usuwa samo pudełko, zachowując jego dzieci, ale ma za sobą historię błędów dostępności, więc przetestuj go z czytnikiem ekranu, zanim na nim polegasz.
Margin czy padding? Wybierz według zadania
Po co sięgnąć
Chcesz
Użyj
Żeby kolor tła pokrywał przestrzeń
Większy obszar dotyku przycisku
Odstęp między dwiema osobnymi kartami
margin albo gap na rodzicu
Jeden element odsunięty na drugi koniec wiersza flex
margin-left: auto
Wyśrodkowany blok o stałej szerokości
margin-inline: auto
Odstęp, który nigdy nie zapadnie się z sąsiadem
padding albo gap
Zapadanie marginesów na żywo
Pierwsza para pokazuje dwa elementy rodzeństwa, których marginesy 24px i 40px się stykają: odstęp wynosi 40px, a nie 64px. Druga para siedzi w kontenerze flow-root, który zapobiega łączeniu marginesów rodzica i dziecka, a trzecia używa flex, gdzie nic się nie zapada.
Zapadanie między rodzeństwem oraz rodzicem i dzieckiem
Zmieniaj marginesy i obserwuj odstępy. Dodanie padding-top: 1px do zewnętrznego pudełka też zapobiega łączeniu rodzica z dzieckiem.
Style obramowań i zaokrąglenia
Wszystkie osiem widocznych stylów obramowania
groove, ridge, inset i outset cieniują obramowanie, udając głębię. Najlepiej wyglądają przy 4px lub więcej.