Всички HTML елементи могат да бъдат разгледани като кутии. В CSS, „Бокс Модел“ терминът се използва, когато говорим за дизайн и оформление. Може да си го представите, като една кутия, която обвива HTML елемента. Тя се състои от margin(разстояние отвън), border(рамка), padding(разстояние отвътре) и content(съдържание). Това ни позволява да слагаме рамки на елементите и да определяме разстоянията между другите елементи.
- Margin – Определя разстоянието извън рамката. Няма цвят на фона, напълно прозрачен е.
- Border – Рамкира елемента, може да се стилизира с различни пропъртита.
- Padding – Определя разстоянието между елемента и рамката. Цвета се определя от фона на самия елемент.
- Съдържание – Съдържанито на самия елемент – текст, изображения и т.н.
За да може един елемент да изглежда еднакво във всички браузъри, трябва да знаете как работи Box Model-а.
Ширина и Височина на Елемент
Важно: Когато задавате ширина и височина на елемент вие задавате тези пропъртита само на съдържанието. За да изчислите пълния размер на елемента, трябва да добавите и margin, padding и border. Общата ширина на елемента в примера по-долу е 300px:
Да го сметнем:
250px (ширина)
+ 20px (ляв + десен подложка)
+ 10px (ляв + десен граница)
+ 20px (ляво + дясно поле)
= 300px
Да приемем, че имаме само 250px пространство:
Общата ширина на елемент, трябва да се изчислява по следния начин:
Обща широчина елемент = width + left padding + right padding + left border + right border + left margin + right margin
Общата височина на елемент, трябва да се изчислява по следния начин:
Обща височина елемент = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
Използваме английските наименования на пропъртитата, защото по този начин се научават най-лесно.
А в текстовите редактори трябва да използвате именно тях.
Проблема със Съвместимостта на Браузърите
IE8 и по-ранни версии на IE, включват padding и border в общата ширина на елемента. За да решите този проблем, добавете <! DOCTYPE html> на HTML страницата. По този начин казвате на браузъра, че използвате HTML5. Хубав инструмент за учене на CSS flexbox