Wizualizator modelu pudełkowego CSS

Jak używać

1. Wprowadź wartości modelu pudełkowego: zdefiniuj margines, obramowanie, padding i wymiary treści w polach lub interaktywnych suwakach.
2. Eksploruj wizualizację: klasyczny diagram zagnieżdżonych pudełek aktualizuje się w czasie rzeczywistym — margines (pomarańczowy), obramowanie (żółte), padding (zielony) i treść (niebieski), wszystko wyraźnie oznaczone.
3. Skopiuj CSS: kliknij Kopiuj CSS, aby uzyskać kompletne właściwości modelu pudełkowego skonfigurowanego elementu.

Dlaczego warto używać wizualizatora modelu pudełkowego CSS?

Model pudełkowy CSS to jedna z najbardziej fundamentalnych koncepcji układu strony — i jedno z najczęstszych źródeł błędów, zwłaszcza przy mieszaniu wartości box-sizing, łączenia marginesów i wymiarowania obramowań. Ten interaktywny wizualizator czyni model pudełkowy konkretnym i namacalnym: dostosowujesz wartości i natychmiast widzisz, jak margines, obramowanie i padding układają się wokół treści. Niezbędne do nauki, debugowania i nauczania CSS.

Funkcje

• Interaktywny diagram: klasyczny widok zagnieżdżonego modelu pudełkowego z warstwami oznaczonymi kolorami (margines, obramowanie, padding, treść).
• Przełącznik box-sizing: przełączaj między content-box a border-box, aby zobaczyć, jak każdy tryb wpływa na całkowite wymiary.
• Indywidualne strony: zdefiniuj wartości góra/prawo/dół/lewo niezależnie dla marginesu, paddingu i obramowania.
• Obliczanie całkowitego rozmiaru: wyświetla całkowitą obliczoną szerokość i wysokość elementu.
• Wyjście CSS: generuje gotowy do użycia CSS dla skonfigurowanego modelu pudełkowego.

Najczęściej zadawane pytania

Jaka jest różnica między content-box a border-box?

Z content-box (domyślnie), width i height stosują się tylko do obszaru treści — padding i obramowanie dodają się do całkowitego rozmiaru elementu. Z border-box, width i height obejmują padding i obramowanie, co czyni rozmiary bardziej przewidywalnymi. Większość nowoczesnych resetów CSS stosuje box-sizing: border-box do wszystkich elementów.

Czym jest łączenie marginesów?

Gdy dwa pionowe marginesy się stykają (między sąsiadującymi elementami block lub między rodzicem a pierwszym/ostatnim dzieckiem), łączą się w jeden margines równy większej z dwóch wartości. Nie zachodzi to z dziećmi flex lub grid, ani z elementami posiadającymi padding lub obramowania.

Jak usunąć dodatkową przestrzeń pod elementami inline?

Elementy inline (jak <img>) mają małą przestrzeń pod sobą spowodowaną wyrównaniem linii bazowej line-height. Napraw to, ustawiając display: block na elemencie, lub vertical-align: bottom, lub font-size: 0 na rodzicu.