Расстановка полей и отступов в CSS. Поля и отступы CSS: отличия свойств margin и padding
22.06.2019
Поля и отступы являются очень важными стилями при построении 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-top
, padding-right
, padding-bottom
, padding-left
, margin-top
, margin-right
, margin-bottom
, margin-left
. Значением этих стилей может быть только один аргумент, задающий величину поля/отступа для данной стороны.
На рисунке красный блок находится внутри ячейки таблицы и примыкает к ее границам, то есть поля у ячейки отсутствуют. Зададим поля ячейке с помощью стиля:
padding
:
5px
;
В результате страница изменит вид к следующему:
Рассмотрим теперь отступы. Две таблицы примыкают друг к другу, если мы хотим их немного раздвинуть, можно применить отступы. Тут есть два варианта: либо задать нижний отступ первой таблицы, либо верхний отступ второй таблицы. Давайте воспользуемся вторым:
margin-top
:
5px
;
Заметьте, что отступ мы задаем именно таблице, а не ячейке таблицы, как в случае с полями. Вот результат:
Кстати, в первом случае (зазор между красным блоком и границами родительской ячейки) того же самого эффекта можно было добиться с помощью задания отступов блока. В общем, если что-то непонятно, отписываемся в комментариях.
Математика в CSS не работает. Например, есть заголовок (тег h1) и за ним следует абзац (тег p). Оба элемента блочные, из чего следует, что их ширина равна элементу-родителю и в потоке они расположены один под другим. Также представим, что заголовок имеет нижнее поле (margin-bottom) равное 30px, а абзац – верхнее поле (margin-top) равное 50px. Казалось бы, промежуток между заголовком и абзацем должен быть равен сумме этих двух полей, то есть 80px, однако нет. Соседние поля не складываются, браузер просто выбирает наибольшее из двух значений, в нашем случае 50px. Поэтому, если вы хотите сделать промежуток между двумя элементами при участии двух элементов, используйте отступы (padding).
Заголовок.
Присутствует нижнеее поле в 30px
Абзац. Есть верхнее поле в 50px
Или вот ситуация: в блоке div лежит абзац (тег p), у абзаца присутствуют верхнее и нижнее поля (margin-top и margin-bottom) равные 50px. Казалось бы, под действием этих полей блок div должен расшириться, однако нет. Поля выступают за пределы блока div (рис. 1). Данный эффект называется конфликтом полей. Чтобы избежать выхода поля за пределы блочного элемента, необходимо элементу-родителю (в нашем случае тегу div) назначить верхний и нижний отступы (padding) равные, например, 1 px. Или границу (border).
Абзац. Есть верхнее и нижнеее поле в 50px
Или вы можете использовать свойство overflow для элемента-родителя со значением отличным от visible: этим вы также предотвратите выход поля элемента-ребенка за пределы элемента-родителя.
Последнее обновление: 08.04.2016
Однострочное текстовое поле создается с помощью элемента input
, когда его атрибут type имеет значение text:
С помощью ряда дополнительных атрибутов можно настроить текстовое поле:
dirname
: устанавливает направление текста
maxlength
: максимально допустимое количество символов в текстовом поле
pattern
: определяет шаблон, которому должен соответствовать вводимый текст
placeholder
: устанавливает текст, который по умолчанию отображается в текстовом поле
readonly
: делает текстовом поле доступным только для чтения
required
: указывает, что текстовое поле обязательно должно иметь значение
size
: устанавливает ширину текстового поля в видимых символах
value
: устанавливает значение по умолчанию в текстовом поле
Применим некоторые атрибуты:
Текстовые поля в HTML5
В этом примере во втором текстовом поле сразу устанавливаются атрибуты maxlength и size . При этом size - то есть количество
символов, которые помещаются в видимое пространство поля больше, чем допустимое количество символов. Однако все равно ввести символов больше, чем
maxlength, мы не сможем.
В данном случае также важно различать атрибуты value и placeholder , хотя оба устанавливают видимый текст в поле.
Однако placeholder устанавливает своего рода подсказку или приглашение к вводу, поэтому он обычно отмечается серым цветом. В то время как
значение value представляет введенный в поле текст по умолчанию:
Атрибуты readonly и disabled делают текстовое поле недоступным, однако сопровождаются разным визуальным эффектом. В случае с
disabled текстовое поле затеняется:
Среди атрибутов текстового поля также следует отметить такой атрибут как list
. Он содержит ссылку на элемент datalist
,
который определяет набор значений, появляющихся в виде подсказки при вводе в текстовое поле. Например:
Текстовые поля в HTML5
Атрибут list текстового поля указывает на id элемента datalist. Сам элемент datalist с помощью вложенных элементов option
определяет элементы списка. И при вводе в текстовое поле этот список отображается в виде подсказки.
Поле поиска
Для создания полей поиска предназначен элемент input с атрибутом type="search" . Формально он представляет собой простое текстовое поле:
Поиск в HTML5
Поле ввода пароля
Для ввода пароля используется элемент input с атрибутом type="password" . Его отличительной чертой является то, что вводимые символы маскируются точками:
HTML-формы
являются элементами управления, которые применяются для сбора информации от посетителей веб-сайта.
Веб-формы состоят из набора текстовых полей, кнопок, списков и других элементов управления, которые активизируются щелчком мыши. Технически формы передают данные от пользователя удаленному серверу.
Для получения и обработки данных форм используются языки веб-программирования, такие как PHP
, Perl
.
До появления HTML5 веб-формы представляли собой набор нескольких элементов , , завершающихся кнопкой . Для стилизации форм в разных браузерах приходилось прилагать немало усилий. Кроме того, формы требовали применения JavaScript для проверки введенных данных, а также были лишены специфических типов полей ввода для указания повседневной информации типа дат, адресов электронной почты и URL-адресов.
HTML5-формы
решили большинство этих распространенных проблем благодаря наличию новых атрибутов, предоставив возможность изменять внешний вид элементов форм за счет CSS3
.
Рис. 1. Улучшенные веб-формы с помощью HTML5
Создание HTML5-формы
1. Элемент
. Он не предусматривает ввод данных, так как является контейнером, удерживая вместе все элементы управления формы – поля
. Атрибуты этого элемента содержат информацию, общую для всех полей формы, поэтому в одну форму нужно включать поля, объединенные логически.
Таблица 1. Атрибуты тега
2. Группировка элементов формы
Элемент
предназначен для группировки элементов, связанных друг с другом, разделяя таким образом форму на логические фрагменты.
Каждой группе элементов можно присвоить название с помощью элемента