Внешние и внутренние отступы онлайн урок.


Для определения всевозможных отступов по отношению к границе элементов используются два свойства - margin (внешние отступы от границы) и padding (внутренние отступы от границы). Для определения отступов используют единицы измерения, как правило - пиксели (px). Для каждой стороны элемента необходимо указать количественное значение отступа от границы элемента - т.е. четыре значения. Рассмотрим пример


.sidebar {
padding: 12px 5px 18px 3px;
margin: 10px 20px 5px 1px;
}


В данном примере указаны внутренние и внешние отступы для четырех сторон блока. Отступы указываются в следующем порядке: верхняя граница, правая граница, нижняя граница и левая граница - т.е., по движению часовой стрелки начиная от верхней границы.

Синтаксис этих правил можно упростить, если значения повторяются, например указать отступы левой-правой стороны и верхней-нижней стороны:


.sidebar {
padding: 12px 5px;
margin: 10px 20px;
}


Если отступы всюду одинаковые, то можно написать одно значение:


.sidebar {
padding: 0;
}


Отметим, что при нулевых отступах единицы измерения писать не обязательно.

Если необходимо задать отступы лишь для отдельных сторон границы элемента, можно использовать следующие свойства. Например, для внешних отступов:

margin-top, margin-right, margin-bottom, margin-left


Аналогичные свойства существуют и для внутренних отступов. Пример использования:


.sidebar {
padding-left: 10px;
padding-right: 15px;
margin-left: 4px;
}


Также, для внешних отступов слева и справа допустимо значение auto. Если оно указано для левого и правого внешнего отступа одновременно, то элемент (если он имеет фиксированную ширину) будет расположен по центру родительского. Например,


.container{
padding: 10px;
margin: 0 auto;
}


Этот подход используется, если необходимо создать макет веб-документа с фиксированной шириной, который выравнивается по середине экрана.

Рассмотрим примеры:



Проверьте свои знания
В рамках предыдущего задания задать в container правила фиксированной ширины 1000px, выравнивания блока по центру экрана и внутренние отступы величиной 1px. Для header, footer, navigation задать внешние отступы равные 20px и внутренние отступы равные 10px. Для content задать внутренние отступы равные 20px; Для header задать высоту блока 50px, выравнивание текста по правому краю и форматировку текста курсивом. Для footer задать высоту блока равную 40px и выравнивание текста по центру.