Свойства margin и padding, позволяют задавать внешний и внутренний отступ для объектов html документа, что порою бывают просто необходимо. На практике данные CSS свойства используются практически постоянно. Для более наглядного понимания давайте рассмотрим блочную модель свойств margin и padding.

Схема блочной модели CSS свойств margin и padding

Исходя из этой схемы, можно сделать вывод, что ширина и высота блочного элемента складывается из ширины и высоты содержимого, плюс отступа padding, плюс толщины рамки, плюс отступа margin.

Таким образом, если вы задаете ширину свойством width, то это будет только ширина содержимого. Об этом не стоит забывать, так как недопонимание этого факта, часто вызывает проблемы.

Данные свойства не наследуются. По умолчанию, в браузере установлены свои внешние и внутренние отступы, которые обычно приходится скидывать.

Например:

body {margin:0; padding:0;}

Задавать внешние и внутренние отступы можно для каждой из отдельных сторон или для всех сторон сразу.

Для того чтоб задать отступ для конкретной стороны необходимо воспользоваться свойствами:

-margin— top – верхний внешний отступ;

-margin— bottom – нижний внешний отступ;

-margin— right – правый внешний отступ;

-margin— left – левый внешний отступ;

-padding— top — верхний внутренний отступ;

-padding— bottom — нижний внутренний отступ;

-padding— right — правый внутренний отступ;

-padding— left — левый внутренний отступ;

Или воспользоваться сокращенной записью, которая имеет синтаксис:

margin:{ [верхний отступ] [правый отступ] [нижний отступ] [левый отступ] ; }

margin:{ [верхний и нижний отступы] [левый и правый отступы] ; }

margin:{ [отступ со всех сторон сразу]; }

Аналогично для внутренних отступов:

padding:{ [верхний отступ] [правый отступ] [нижний отступ] [левый отступ] ; }

padding:{ [верхний и нижний отступы] [левый и правый отступы] ; }

padding:{ [отступ со всех сторон сразу]; }

Выравнивание блочных элементов по центру

Свойство margin часто используется для выравнивания элементов веб – страницы по центру, для этого необходимо назначить данному свойству следующие значения margin: 0 auto, это скажет браузеру, что необходимо выровнять блочный элемент по центру окна браузера или дочернего элемента.

Например:

div#content {

<!–Задаем ширину блока и рамку –>

width: 50%;

border: 2px solid blue;

<!–Задаем выравнивание блока по центру и внутренние отступы для контента –>

margin:0 auto;

padding: 5px 0px 5px 10px;

Данный код выровняет блок с идентификатором main по центру, а также задаст отступы для содержимого блока.

Результат можно посмотреть на скриншоте:

На этом обзор CSS свойств margin и padding подошел к концу, я искренне надеюсь, что статья была для вас полезной и понятной. Постарайтесь запомнить эту информацию, так как на практике довольно часто придется ею пользоваться. На этом я с вами прощаюсь, до встречи в следующих статьях на страницах блога.