Работа с отступами, свойство margin
№ урока: 5 Курс: HTML5 & CSS3 Стартовый
Средства обучения: Любое IDE (VSCode, webshtorm и т.д.) или текстовый редактор
Обзор, цель и назначение урока
Вы познакомитесь с механикой работы внешних отступов у элементов. Узнаете, что такое
проваливание (схлопывание) и в каких случаях оно присутствует. Будут рассмотрены неявные
отступы при работе со строчно-блочными элементами.
Изучив материал данного занятия, учащийся сможет:
• Добавлять или убирать внешние отступы у элементов.
• Находить и поправлять не явные отступы из-за проваливания(схлопывания).
• Менять тип элемента через CSS.
Содержание урока
1. Внешние отступы элемента
2. Проваливание
3. Поведение при смешанном типе элемента
Резюме
• Внешние отступы (margin) — определение расстояния от элемента, до внешних по
отношению к нему других элементов, расположенных со всех четырех сторон.
• Проваливание, а также Схлопывание — изначальный механизм работы margin-нов,
который работает для нижней и верхней стороны элемента, вычисляя итоговый
промежуток между тегами.
• Строчно-блочный элемент (inline-block) — свойство элемента, которое содержит в себе
и строчное поведение так и блочное.
Закрепление материала
• Принимает ли margin отрицательные значения?
• Как можно центрировать блочный элемент?
• Что такое проваливание(схлопывание)?
• Возможно ли поменять тип элемента? Как?
Дополнительное задание
Задание
Создайте прямоугольник с шириной 400 пикселей, использовав заголовок и прописав в нем
любой текст и добавив цвет фона. Оттолкните его с верхнего края страницы на 100px, а по
горизонтали центрируйте.
Самостоятельная деятельность учащегося
Задание 1
Page | 1
CyberBionic Systematics ® Tel. 0 800 750 312 Title: [HTML5 & CSS3 Стартовый]
19 Eugene Sverstyuk Str., 5 floor E-mail: [email protected] Lesson: 5
Kyiv, Ukraine
Site: www.edu.cbsystematics.com
| itvdn.com
Создайте меню, использовав смешанный тип элемента.
Задание 2
Создайте блок, в котором, вне зависимости от ширины, вложенный текст, выделенный фоном,
будет прижат к правой стороне.
Задание 3
Создайте панель соцсетей, используя картинки в папке DZ. Изображение должны быть
ссылками.
Рекомендуемые ресурсы
https://webref.ru/
https://html5book.ru/
http://htmlbook.ru/
https://www.w3schools.com/
Page | 2
CyberBionic Systematics ® Tel. 0 800 750 312 Title: [HTML5 & CSS3 Стартовый]
19 Eugene Sverstyuk Str., 5 floor E-mail: [email protected] Lesson: 5
Kyiv, Ukraine
Site: www.edu.cbsystematics.com
| itvdn.com
