и свойств CSS.

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

Возможные значения margin и padding.

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

Вот примеры:

margin: 5px ; - одно значение .
Одно значение - Поля одинаковые со всех сторон.

margin: 5px 40px; - два значения.
Первое значение - Устанавливает поля от верхней и нижней границ.

margin: 5px 40px 20px; - три значения.
Второе значение - Устанавливает поля от левой и правой границ элемента.

margin: 5px 40px 20px 1px; - четыре значения.
Первое значение - Устанавливает поле от верхней границы элемента.
Второе значение - Устанавливает поле от правой границы элемента.
Третье значение - Устанавливает поле от нижней границы элемента.
Четвёртое значение - Устанавливает поле от левой границы элемента.

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

Дочерние свойства margin и padding.

Свойства CSS margin и padding являются базовыми и имеют ряд дочерних свойств.

У margin зто:

• margin-top - Поле от верхней границы элемента родителя,
• margin-left - Поле от левой границы элемента родителя,
• margin-right - Поле от правой границы элемента родителя,
• margin-bottom - Поле от нижней границы элемента родителя.

И у padding соответственно:

• padding-top - Отступ от верхней границы элемента до его содержания,
• padding-left - Отступ от левой границы элемента до его содержания,
• padding-right - Отступ от правой границы элемента до его содержания,
• padding-bottom - Отступ от нижней границы элемента до его содержания.

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

Поля и отступы являются одними из основных составляющих дизайна сайта, по этому поводу следует придерживаться нескольких рекомендаций.

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

Соблюдайте правила пропорциональности и соизмеримости полей и отступов как для отдельно взятого элемента, так и для всей страницы (композиции элементов) целиком.

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

В этой статье я хотел бы рассказать, как правильно расставлять поля (padding) и отступы (margin) в CSS.

Прежде всего давайте вспомним определение полей и отступов согласно спецификации W3C . В боксовой модели (box model) поля - это расстояние между контентом (content) и границей блока (border). А отступы это расстояние между границей блока и границей соседнего или родительского элемента.

Таким образом, если граница и фон элемента не заданы, то нет разницы, использовать свойство padding или margin для задания отступов, но при условии, что ширина (width) и высота (height) элемента не заданы и не изменен алгоритм расчета размеров контента с помощью свойства box-sizing .

В любом случае следует помнить, что поля могут быть как включены в ширину или высоту элемента, так и нет. Отступы же всегда задаются снаружи элемента.

Теперь давайте рассмотрим как правильно расставлять поля и отступы между элементами. Возьмем в качестве примера следующий блок.

Это блок новостей news . Он состоит из заголовка, списка новостей и ссылки «Другие новости». Дадим им следующие названия классов: news__title , news__list и news__more-link .

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

News { padding: 20px 25px; }

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

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

Теперь нужно задать вертикальные отступы между элементами. Для этого следует определить какой из элементов является обязательным . Очевидно что блок новостей не может существовать без списка новостей, в то же время ссылки «Другие новости» может и не быть, заголовок тоже может быть убран, например, при изменении дизайна.

Учитывая это, задаем для заголовка отступ снизу, а для ссылки «Другие новости» отступ сверху.

News__title { margin-bottom: 10px; } .news__more-link { margin-top: 12px; }

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

News__list { margin: 10px 0 12px 0; }

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

Можно задать для каждой новости кроме первой отступ сверху, либо для каждой новости кроме последней отступ снизу. Первый вариант более предпочтителен, поскольку псевдоселектор:first-child был добавлен в спецификации CSS 2.1 и имеет более широкую поддержку, в отличие от псевдоселектора:last-child , который был добавлен только в спецификации CSS версии 3.0 .

News__list-item { margin-top: 18px; } .news__list-item:first-child { margin-top: 0; }

Таким образом, правильная расстановка полей и отступов позволяет гибко менять внешний вид любого блока без внесения изменений в стили и без нарушений в дизайне. Самое главное - определить, какие элементы блока являются основными (обязательными ), а какие опциональными .

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

В этом случае можно использовать следующий способ задания отступов.

Popup__header + .popup__text { margin-top: 15px; }

Тогда отступ появится, только если будут использоваться оба элемента. В случае же вывода только заголовка или только текста, лишнего отступа не будет.

Схлопывание вертикальных отступов

Еще один нюанс, о котором не все знают, связан с вертикальными отступами между соседними блоками. В определении отступов, которое я приводил выше, сказано, что отступ - это расстояние между границами текущего и соседнего блока. Таким образом, если мы расположим два блока друг под другом и зададим одному из них отступ снизу в 30px , а другому отступ сверху в 20px , отступ между ними будет не 50px , а 30px .

То есть произойдет наложение отступов, и отступ между блоками будет равен наибольшему отступу, а не сумме отступов. Этот эффект также называют «схлопыванием».

Прошу заметить, что горизонтальные отступы, в отличие от вертикальных, не «схлопываются», а суммируются. Поля (padding) также суммируются.

Зная о «схлопывании» отступов, мы можем использовать эту особенность в свою пользу. Например, если нам необходимо расставить отступы для заголовков и текста внутри статьи, то для заголовка первого уровня зададим отступ снизу в 20px , а для заголовка второго уровня отступ сверху 20px и снизу 10px , а для всех параграфов зададим отступ сверху 10px .

H1 { margin-bottom: 24px; } h2 { margin-top: 24px; margin-bottom: 12px; } p { margin-top: 12px; }

Теперь заголовок h2 можно расположить как после заголовка h1 , так и после параграфа. В любом случае отступ сверху не будет превышать 24px .

Общие правила

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

1. Если соседние элементы имеют одинаковые отступы, то лучше задавать их родительскому контейнеру, а не элементам.
2. При задании отступов между элементами, следует учитывать, обязательный это элемент или опциональный.
3. Для списка однотипных элементов - не забывать о том, что число элементов может варьироваться.
4. Помнить о наложении вертикальных отступов и использовать эту особенность там, где она принесет пользу.

Теги: Добавить метки

Последнее обновление: 08.04.2016

Однострочное текстовое поле создается с помощью элемента input , когда его атрибут type имеет значение text:

С помощью ряда дополнительных атрибутов можно настроить текстовое поле:

dirname : устанавливает направление текста

maxlength : максимально допустимое количество символов в текстовом поле

pattern : определяет шаблон, которому должен соответствовать вводимый текст

placeholder : устанавливает текст, который по умолчанию отображается в текстовом поле

readonly : делает текстовом поле доступным только для чтения

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

size : устанавливает ширину текстового поля в видимых символах

value : устанавливает значение по умолчанию в текстовом поле

Применим некоторые атрибуты:

Отправить Отмена

В этом примере во втором текстовом поле сразу устанавливаются атрибуты maxlength и size . При этом size - то есть количество символов, которые помещаются в видимое пространство поля больше, чем допустимое количество символов. Однако все равно ввести символов больше, чем maxlength, мы не сможем.

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

Атрибуты readonly и disabled делают текстовое поле недоступным, однако сопровождаются разным визуальным эффектом. В случае с disabled текстовое поле затеняется:

Среди атрибутов текстового поля также следует отметить такой атрибут как list . Он содержит ссылку на элемент datalist , который определяет набор значений, появляющихся в виде подсказки при вводе в текстовое поле. Например:

Отправить

Атрибут list текстового поля указывает на id элемента datalist. Сам элемент datalist с помощью вложенных элементов option определяет элементы списка. И при вводе в текстовое поле этот список отображается в виде подсказки.

Поле поиска

Для создания полей поиска предназначен элемент input с атрибутом type="search" . Формально он представляет собой простое текстовое поле:

Поле ввода пароля

Для ввода пароля используется элемент input с атрибутом type="password" . Его отличительной чертой является то, что вводимые символы маскируются точками:

Поля и отступы являются очень важными стилями при построении 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 >