Безплатно! Онлайн събитие: От претоварване с информация до фокус и структура с Gemini & NotebookLM Регистрация тук.

Box модела в HTML

Пълен достъп до курса: Не

За пълен достъп или безплатна проба (2 модула), моля влезте или се регистрирайте.

HTML5 и CSS3 В курса ще се научите как да създавате съвременни уеб страници с помощта на HTML и CSS. Това обучение е подходящо за напълно начинаещи и ще ви помогне да усвоите основите на уеб разработката, като научите как да създавате структура и стил на уеб страници.

Как работи Box моделът – мислете в „кутийки“

Всеки HTML елемент се визуализира като правоъгълна кутия. Блоковите елементи заемат цялата ширина на реда, дори когато им зададете по-малка ширина, докато inline елементите заемат място според съдържанието си. Най-важното: margin е външно отстояние, а padding е вътрешно отстояние в самата кутия.

Практически пример стъпка по стъпка

Изберете h1 в CSS и добавете background цвят, за да видите реалните му граници.
Направете същото за span с различен цвят и сравнете размера им.
Задайте на h1 ширина 50% и наблюдавайте как се променя, но продължава да стои на отделен ред (защото е блоков елемент).
Добавете padding: 20px; и вижте как текстът се отдалечава навътре от рамката.
Сравнете с вече зададения margin (например 50px), който създава разстояние извън елемента.

Основни CSS свойства от урока

background – задава фонов цвят и помага визуално да видите границите на елемента
width – определя ширината (може да е в % или px)
margin – външно отстояние извън кутията
padding – вътрешно отстояние между съдържанието и ръба на кутията

Разбирането на Box модела е фундаментално за правилното подреждане и стилизиране на елементите в HTML и CSS.