Поля и отступы (HTML + CSS)

Поля и отступы являются очень важными стилями при построении HTML-страницы. Они позволяют более точно спозиционировать элементы, создать каркас с необходимыми зазорами и т.п. Оба стиля очень похожи и выполняют схожие функции. Но отличия все же есть.

Элементы могут быть вложенными, могут находиться по соседству друг от друга. Давайте рассмотрим следующий пример:

Имеем две таблицы, лимонного и голубого цвета, расположенные друг под другом. Таблицы состоят из одной ячейки. В ячейке первой таблицы находится красный блок. На этом примере рассмотрим принцип работы полей и отступов.

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

Существует несколько способов задания этих стилей. Например, непосредственно указать размер всех полей или отступов одним аргументом в какой-нибудь единице измерения (px, ex, em, pt, cm и так далее):

padding: 3px;
margin: 3px;

В этом случае поля и отступы будут со всех четырех сторон одинаковы. При задании двух аргументов через пробел:

padding: 3px 5px;
margin: 3px 5px;

первый будет определять величину полей/отступов сверху и снизу, второй — слева и справа. При задании трех аргументов:

padding: 3px 5px 2px;
margin: 3px 5px 2px;

первый — поле/отступ сверху, второй — одновременно слева и справа, третий — снизу. При четырех аргументах:

padding: 3px 5px 2px 6px;
margin: 3px 5px 2px 6px;

первый — поле/отступ сверху, второй — справа, третий — снизу, четвертый — слева. Легко запомнить: первый — сверху, далее по часовой стрелке. Кроме того, можно задавать поля и отступы для конкретного края отдельно, с помощью соответствующих стилей: padding-top, padding-right, padding-bottom, padding-left, margin-top, margin-right, margin-bottom, margin-left. Значением этих стилей может быть только один аргумент, задающий величину поля/отступа для данной стороны.

На рисунке красный блок находится внутри ячейки таблицы и примыкает к ее границам, то есть поля у ячейки отсутствуют. Зададим поля ячейке с помощью стиля:

padding: 5px;

В результате страница изменит вид к следующему:

Рассмотрим теперь отступы. Две таблицы примыкают друг к другу, если мы хотим их немного раздвинуть, можно применить отступы. Тут есть два варианта: либо задать нижний отступ первой таблицы, либо верхний отступ второй таблицы. Давайте воспользуемся вторым:

margin-top: 5px;

Заметьте, что отступ мы задаем именно таблице, а не ячейке таблицы, как в случае с полями. Вот результат:

Кстати, в первом случае (зазор между красным блоком и границами родительской ячейки) того же самого эффекта можно было добиться с помощью задания отступов блока. В общем, если что-то непонятно, отписываемся в комментариях.

HTML-код подопытной страницы:

<html>
  <head>
    <title>Тест</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  </head>
  <body>
    <style>
      table {width: 200px;  height: 150px; border: 1px solid #555; border-collapse: collapse}
      td {vertical-align: top; padding: 0px}
      div {width: 100px;  height: 100px; background: red}
    </style>
    <table style="background: lime">
      <tr>
        <td style="padding: 5px">
          <div style="margin: 0px">&nbsp;</div>
        </td>
      </tr>
    </table>
    <table style="background: skyblue; margin-top: 5px">
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table>
  </body>
</html>

Комментарии

Оставить комментарий »

 
IgorSt
4 октября 2011, 11:05
#1
 

Спасибо

Igas
22 декабря 2011, 21:08
#2
 

Большое спасибо

mashur
22 марта 2012, 18:34
#3
 

спасибо огромное, такая простая вещь, а нигде не мог найти отступ в таблице...

Роман
17 ноября 2012, 20:39
#4
 

Спасибо. Очень актуально. Подскажите пожалуйста. При внесении кода счетчика посетителей в подвал он сдвигается сильно влево и не полностью отображается. Как его немного подвинуть, чтобы добиться корректного отображения

Саша
27 февраля 2013, 18:12
#5
 

Спасибо!
Очень полезная инфа! По ходу не первый раз её тут нахожу от случая к случаю по мере необходимости.

MIst
31 марта 2013, 2:29
#6
 

Спасибо, кстати, клевое оформление сайта :)

Кирилл
25 июля 2013, 15:27
#7
 

Большое спасибо за статью. Очень помогла!!!!!

Андрей
16 октября 2013, 3:03
#8
 

А как можно сделать нужный отступ справа но не в таблице?

Оставить комментарий

Ваше имя
 
Ваш e-mail
 
Комментарий