CSS Box Model
Разбери как браузърът изчислява пространството, което заема всеки HTML елемент.
Всеки елемент е кутия
Браузърът разглежда HTML елементите като правоъгълни кутии. Всяка кутия има съдържание, вътрешно отстояние, рамка и външно отстояние.
Content е пространството за текста или другото съдържание на елемента.
Padding създава разстояние между съдържанието и рамката.
Border огражда съдържанието и padding.
Margin създава пространство извън рамката, между елемента и околните елементи.
Как се изчислява ширината?
При content-box свойството widthзадава ширината само на съдържанието.
Крайна ширина = width + ляв и десен padding + лява и дясна border.
При border-box зададената ширина включва съдържанието, padding и border.
Margin остава извън тази ширина и трябва да се отчита отделно при подреждането.
Box Model Playground
Променяй width, padding, border и margin. Превключвай между content-box и border-box и сравнявай реалната ширина на елемента.
Настройки на елемента
Експериментирай с размерите
Промени стойностите на padding, border и width. След това смени box-sizing от content-box на border-box и наблюдавай разликата.
Създай карта с правилни размери
Оформи проектната карта, като използваш научените CSS свойства.
Изисквания към задачата
- Използвай
box-sizing: border-box. - Добави вътрешно отстояние с
padding. - Създай видима рамка с
border. - Добави външно отстояние с
margin. - Ограничи ширината с
max-width: 100%.
Промените се запазват локално в браузъра. Демонстрацията и проектът са независими.
05 / ПРОВЕРИ
Провери петте изисквания към CSS Box Model.
Резултатите ще се появят тук след проверката.