Внимание! На этой странице вы найдете материал урока из архивного курса по CSS. Курс был написан в 2015 и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по CSS и на странице первого урока.
- Сделайте отступ сверху при помощи
marginразмером10%, а с других сторон по10px.
Свойство margin используется очень часто, поэтому важно с ним познакомится. Оно нужно для установления отступа каждого края элемента до внутренних границ родительского элемента. Часто в начале CSS файла можно увидеть следующую запись:
* {
margin: 0;
/* и другие */
}Эта запись означает, что мы сбрасываем отступы всех элементов. Свойство margin имеет следующий синтаксис:
div {
margin: 1px 2px 3px 4px;
margin: 1px 2px 3px;
margin: 1px 2px;
margin: 1px;
margin: auto;
/* и другие */
}Значения могут измеряться в любых единицах, которые поддерживаются CSS или в процентах. Число значений имеет следующий результат:
- 1 значение - отступ задается со всех сторон одинаково;
- 2 значения - первое задает от верхнего и нижнего краёв, второе от левого и правого краёв;
- 3 значения - первое от верхнего, второе от левого и правого, третье от нижнего краёв;
- 4 значения - задает от всех краёв в следующей последовательности: верх, право, низ, лево.
Также существуют более конкретные аналоги: margin-top, margin-right, margin-bottom и margin-left. Например:
div {
margin-top: 20px; /* Отступ сверху 20 пикселей */
}
div {
margin-left: 50%; /* Отступ слева 50 процентов */
}Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу CSS.
