CSS box model: как се събират съдържание, рамка и отстояния

Полезно е да знаеш

Един правоъгълен елемент в CSS има повече от видимо съдържание. Моделът на кутията разглежда съдържание, вътрешно отстояние, рамка и външно отстояние. Тези части изпълняват различни задачи. Padding отделя съдържанието от рамката, а margin участва в разстоянието спрямо други елементи. Разбирането им помага да се обясни защо два блока с еднакъв текст могат да заемат различно място, въпреки че зададената им ширина изглежда една и съща. [1]

Свойството box-sizing определя как се изчисляват общата ширина и височина. При content-box зададената ширина се отнася до областта на съдържанието, а вътрешните отстояния и рамката се добавят към нея. При border-box те са включени в зададения размер. [2] Това е конкретно правило за изчисление, което може да бъде показано с малък числов пример. То не означава, че външните отстояния изчезват или че всеки елемент автоматично ще се побере в произволен контейнер.

Нека имаме измислена карта на книга с ширина двеста единици, вътрешно отстояние от десет от всяка страна и рамка от една. При стандартния content-box общата ширина с рамката става двеста двадесет и две. При border-box същите части са включени в зададените двеста. Примерът показва защо две колони могат неочаквано да излязат извън реда. Преди да се намалява произволно размерът на шрифта, е полезно да бъде проверено кое всъщност измерва зададената ширина.

Външните отстояния имат и особености като сливането на определени вертикални margins в нормалното оформление. [1] Това е отделна тема от включването на рамката в ширината. При диагностика е полезно да се разглежда един проблем наведнъж: първо размерът на кутията, после разстоянието до съседите. Ако двете бъдат променяни едновременно без ясна цел, случайното подобрение може да скрие причината и да затрудни следващата редакция на страницата.

За практическо упражнение можем да използваме две еднакви карти и да променим само box-sizing. След това добавяме по-дълго заглавие и наблюдаваме височината. Така се вижда разликата между хоризонталното изчисление и естественото разполагане на текста. Проверяваме и дали изображенията или бутоните създават собствени ограничения. Важно е всяко наблюдение да бъде описано спрямо конкретните стойности, а не като общо впечатление, че CSS се държи непредвидимо.

Когато моделът е ясен, разговорът за оформлението става по-точен. Можем да поискаме повече вътрешно пространство около текста, по-голямо разстояние между картите или различна обща ширина, без тези задачи да бъдат смесени. Box model предоставя езика за това разграничение. Добрата поддръжка използва този език последователно и проверява крайния резултат с реално съдържание, включително дълги заглавия и различни размери на прозореца, а не само с удобен кратък пример. Външните отстояния в числовия пример се разглеждат отделно от рамката и вътрешното пространство.