- Теория
- Теория
Свойство margin, внешний отступ
Мы добавили шапке внутренние отступы. Но снаружи шапки на странице осталось свободное пространство. Откуда оно там взялось?
Дело в том, что многие современные браузеры добавляют тегу <body> внешние отступы 8px со всех сторон. Внешним отступом называют отступ от внешней границы элемента до границ родительского элемента или до соседних элементов.
Чтобы управлять внешними отступами, используют свойство margin. У него, как и у padding, есть краткая и полная записи.
// Краткая запись
margin: 20px;
// Полная запись
margin-top: 0;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 15px;Свойство margin-top создаёт внешний отступ сверху, margin-right — справа, margin-bottom — снизу, а margin-left — слева.
Указывать все четыре свойства необязательно. Если требуется задать внешний отступ лишь с одной или нескольких сторон, то достаточно использовать только соответствующие свойства.
На макете у <body> внешних отступов нет, поэтому и со страницы их нужно убрать. Лишние отступы также есть и у следующего сеточного элемента на нашей странице — списка преимуществ. Он размечен с помощью тега <ul>. По умолчанию браузеры добавляют неупорядоченному списку внутренние и внешние отступы. Их придётся переопределить.
Итак, первым делом уберём внешние отступы у <body>, потом займёмся списком преимуществ. У списка есть класс features-list, используем его для стилизации. Сначала обнулим у списка внешние отступы сверху и снизу, а потом зададим внутренние отступы по 20px со всех сторон.
Если какому-либо свойству задают нулевое значение, то единицы измерения обычно не указывают.
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
