Поля и отступы (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"> </div> </td> </tr> </table> <table style="background: skyblue; margin-top: 5px"> <tr> <td> </td> </tr> </table> </body> </html>
Спасибо
Большое спасибо
спасибо огромное, такая простая вещь, а нигде не мог найти отступ в таблице...
Спасибо. Очень актуально. Подскажите пожалуйста. При внесении кода счетчика посетителей в подвал он сдвигается сильно влево и не полностью отображается. Как его немного подвинуть, чтобы добиться корректного отображения
Спасибо!
Очень полезная инфа! По ходу не первый раз её тут нахожу от случая к случаю по мере необходимости.
Спасибо, кстати, клевое оформление сайта :)
Большое спасибо за статью. Очень помогла!!!!!
А как можно сделать нужный отступ справа но не в таблице?