Безплатно! Онлайн събитие: AI асистент за учене, преподаване и подготовка Регистрация тук.
Box модела в HTML
Пълен достъп до курса: Не
За пълен достъп или безплатна проба (1 модула), моля влезте или се регистрирайте.
Как работи Box моделът – мислете в „кутийки“
Всеки HTML елемент се визуализира като правоъгълна кутия. Блоковите елементи заемат цялата ширина на реда, дори когато им зададете по-малка ширина, докато inline елементите заемат място според съдържанието си. Най-важното: margin е външно отстояние, а padding е вътрешно отстояние в самата кутия.
Практически пример стъпка по стъпка
- Изберете
h1в CSS и добаветеbackgroundцвят, за да видите реалните му граници. - Направете същото за
spanс различен цвят и сравнете размера им. - Задайте на
h1ширина50%и наблюдавайте как се променя, но продължава да стои на отделен ред (защото е блоков елемент). - Добавете
padding: 20px;и вижте как текстът се отдалечава навътре от рамката. - Сравнете с вече зададения
margin(например50px), който създава разстояние извън елемента.
Основни CSS свойства от урока
background– задава фонов цвят и помага визуално да видите границите на елементаwidth– определя ширината (може да е в%илиpx)margin– външно отстояние извън кутиятаpadding– вътрешно отстояние между съдържанието и ръба на кутията
Разбирането на Box модела е фундаментално за правилното подреждане и стилизиране на елементите в HTML и CSS.
Дискусия към урока
Задавайте въпроси, споделяйте опит и помагайте на останалите да учат заедно.
Здравейте, при зададени абсолютно същите спесификации при мен нещата изглеждат различно. Защо се получава така? Приложено изпращам и снимки:
4
Здравейте ! Искам да попитам защо точно го наричате КОНТЕЙНЕР? Според мен е border , така го знам и според мен ще е по-лесно за другите изучаващи курса да го р…
4
3
