Учебник CSS для начинающих. Поля и отступы. Поля и отступы CSS: отличия свойств margin и padding Отступы и поля в html

В этой статье я хотел бы рассказать, как правильно расставлять поля (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. Помнить о наложении вертикальных отступов и использовать эту особенность там, где она принесет пользу.

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

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

Вокруг контента, в блоке, могут быть пустые, не занятые поля (padding) , что кстати придает содержимому блока более привлекательный вид. Сразу за полями пролегает граница блока (border) , которая может иметь заданную толщину, цвет и стиль. Блок может иметь отступы (margin) т.е. свободное пространство вокруг границ. Поля, границы и отступы не входят в ширину блока, ширина задается только для его содержимого.

Поля. Свойства MARGIN-TOP, MARGIN-RIGHT,
MARGIN-BOTTOM, MARGIN-LEFT

Эти свойства задают величину полей вокруг блока, значения задаются в любых единицах длины или процентах:

• margin-top - обозначает ширину верхнего поля;
• margin-right - обозначает ширину правого поля;
• margin-bottom - обозначает ширину нижнего поля;
• margin-left - обозначает ширину левого поля.

Пример правила для абзаца, с полями справа и слева по 25px, будет выглядеть так:

p {
margin-top : 0px ;
margin-right : 25px ;
margin-bottom : 0px ;
margin-left : 25px ;
}

Свойство MARGIN

Это свойство - стенографическое, которое применяется для сокращенной записи выше перечисленных свойств. Свойство margin может иметь количество значений от одного до четырех:

• если задано только одно, то поля со всех сторон блока одинаковые;
• если заданы два значения, то первое обозначает поля сверху и снизу, второе - справа и слева (значения каждой пары равны);
• если задано три значения, то первое обозначает верхнее поле, второе - левое и правое, третье - нижнее;
• если заданы все четыре значения, то соответственно, первое - верх, затем - правое поле, потом нижнее и последнее - левое.

Пишем правило:

p {margin : 15px 5px 20px }

В этом примере верхнее поле абзаца будет равно 15px, правое и левое поля по 5px, нижнее поле будет 20px.

Границы. Свойства BORDER-TOP-WIDTH, BORDER-RIGHT-WIDTH, BORDER-BOTTOM-WIDTH, BORDER-LEFT-WIDTH

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

• thin - тонкая;
• medium - средней толщины (используется по умолчанию);
• thick - толстая.

Так же значения можно задавать в любых единицах длины, в процентах значения не задаются. Правило можно записать так:

p {
border-top-wdth : 1px ;
border-right-wdth : 2px ;
border-bottom-wdth : medium ;
border-left-wdth : thin ;
}

Свойство BORDER-WIDTH

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

p {border-width : 1px 2px medium thin }

Свойство BORDER-COLOR

Это свойство так же стенографическое, с его помощью задается границ блока, значениями являются:

• ключевое слово (red, yellow, black, blue и т.д.);
• шестнадцатиричный код цвета (00FFFF, 000000, FFFFFF и т.д.);
• десятичный код в RGB (color: rgb (120, 25, 182));
• transparent - прозрачная граница.

Если необходимо задать разные цвета каждой из четырех границ, то применяются свойства:

• border-top-color - цвет верхней границы;
• border-right-color - цвет правой границы;
• border-bottom-color - цвет нижней границы;
• border-left-color - цвет левой границы.

Правило для такого примера будет выглядеть так:

p {
border-top-color : blue ;
border-right-color : 000000 ;
border-bottom-color : FF0000 ;
border-left-color : rgb (25, 125, 205) ;
}

Свойство BORDER-STYLE

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

• border-top-style - тип линии верхней границы;
• border-right-style - тип линии правой границы;
• border-bottom-style - тип линии нижней границы;
• border-left-style - тип линии левой границы.

Значениями свойства являются ключевые слова:

• none - граница отсутствует (используется по умолчанию);
• dotted - граница оформлена линией состоящих из точек;
• dashed - пунктирная линия;
• solid - сплошная линия;
• double - двойная сплошная линия;
• groove - граница отображается "вдавленной" линией (имитирует объём);
• ridge - граница отображается "выпуклой" линией;
• inset - граница отображается так, что весь блок выглядит вдавленным;
• outset - весь блок выглядит выпуклым.

Посмотрим на примерах:

Стенографическое свойство border-style позволяет сокращать значения стилей для всех четырех сегментов границы, задается так же как для свойства . Пишем правило для блока с границами выполненными пунктирной линией:

p {border-style : dashed }

Свойства BORDER-TOP, BORDER-RIGHT, BORDER-BOTTOM, BORDER-LEFT

Это стенографические свойства, которые позволяют сокращенно записать значения свойств border-width , border-style и border-color , смотрим на примере:

p {
border-top : 1px solid red ;
border-right : 3px solid red ;
border-bottom : 1px solid red ;
border-left : 3px solid red
}

Границы у абзаца будут красными, выполненными сплошной линией. Вверху и внизу толщина границ 1px, справа и слева - 3px.

Свойство BORDER

Это свойство стенографическое и применяется для задания параметров всех четырех сегментов границ: ширины, цвета и стиля. Пишем пример правила:

p {border : 1px solid blue }

Граница вокруг этого абзаца будет одинаковой со всех сторон, выполненой сплошной линией синего цвета толщиной 1px.

Отступы. Свойства PADDING-TOP, PADDING-RIGHT,
PADDING-BOTTOM, PADDING-LEFT

Эти свойства позволяют задать размеры отступов для каждой стороны в отдельности, значения задаются в единицах длины или в процентах:

• padding-top - ширина верхнего поля;
• padding-right - ширина правого поля;
• padding-bottom - ширина нижнего поля;
• padding-left - ширина левого поля.

Свойство PADDING

Это стенографическое свойство, которое применяется для сокращенной записи выше описанных свойств. Свойство padding может иметь от одного до четырех значений, которые присваиваются так же как для (полей) и (границ). Запишем такое правило:

p {
background-color : white ;
border : 2px dotted blue ;
padding : 10px 25px
}

На примере получившегося абзаца посмотрим как работают отступы:

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

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

То, без чего не создать сайт: ∼ ∼ Многим интересно:
∼

Последнее обновление: 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

Для подготовки такого поля разметка будет минимальна.

Здесь используются специальные атрибуты HTML5 placeholder и required:

• placeholder - данный атрибут задает вывод текста в поле перед тем, как поле получит фокус ввода, затем текст скрывается.
• required - данный атрибут задает обязательное условие наличие информации в поле ввода перед отправкой формы.

HTML5 также имеет новое значение для атрибута type: type="search" . Но она плохо поддерживается в браузерах, поэтому мы не будем его пока использовать.

Такие элементы HTML как img и input не имеют содержания. Следовательно псевдо-элемент, например:before, не будет выводить никаких стрелок для кнопки.

Решением данной задачи в нашем случае является использование button type="submit" вместо input type="submit" . Таким образом, мы сохраняем для формы использование клавиши ENTER.

CSS

Ниже приводятся необходимые для нашей демонстрации стили:

Отмена обтекания текстом

Cf:before, .cf:after{ content:""; display:table; } .cf:after{ clear:both; } .cf{ zoom:1; }

Элементы формы

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

/* Стили для контейнера формы */ .form-wrapper { width: 450px; padding: 15px; margin: 150px auto 50px auto; background: #444; background: rgba(0,0,0,.2); border-radius: 10px; box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2); } /* Стили поля ввода текста */ .form-wrapper input { width: 330px; height: 20px; padding: 10px 5px; float: left; font: bold 15px "lucida sans", "trebuchet MS", "Tahoma"; border: 0; background: #eee; border-radius: 3px 0 0 3px; } .form-wrapper input:focus { outline: 0; background: #fff; box-shadow: 0 0 2px rgba(0,0,0,.8) inset; } .form-wrapper input::-webkit-input-placeholder { color: #999; font-weight: normal; font-style: italic; } .form-wrapper input:-moz-placeholder { color: #999; font-weight: normal; font-style: italic; } .form-wrapper input:-ms-input-placeholder { color: #999; font-weight: normal; font-style: italic; } /* Кнопка отправки формы */ .form-wrapper button { overflow: visible; position: relative; float: right; border: 0; padding: 0; cursor: pointer; height: 40px; width: 110px; font: bold 15px/40px "lucida sans", "trebuchet MS", "Tahoma"; color: #fff; text-transform: uppercase; background: #d83c3c; border-radius: 0 3px 3px 0; text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3); } .form-wrapper button:hover{ background: #e54040; } .form-wrapper button:active, .form-wrapper button:focus{ background: #c42f2f; outline: 0; } .form-wrapper button:before { /* стрелка влево */ content: ""; position: absolute; border-width: 8px 8px 8px 0; border-style: solid solid solid none; border-color: transparent #d83c3c transparent; top: 12px; left: -6px; } .form-wrapper button:hover:before{ border-right-color: #e54040; } .form-wrapper button:focus:before, .form-wrapper button:active:before{ border-right-color: #c42f2f; } .form-wrapper button::-moz-focus-inner { /* Удаляем дополнительное пространство рядом с кнопкой в Mozilla Firefox */ border: 0; padding: 0; }

В предыдущей главе мы упоминали о таких свойствах CSS, как margin (поле) и padding (отступ). Теперь мы остановимся на них более подробно и рассмотрим, чем они отличаются друг от друга и какие особенности имеют.

Создавать промежутки между элементами можно и тем, и другим способом, но если padding – это отступ от содержимого до края блока, то margin – это расстояние от одного блока до другого, межблоковое пространство. На скриншоте показан наглядный пример:

Padding отделяет содержимое от границы блока, а margin создает промежутки между блоками

Как видите, поля и отступы CSS отличаются между собой, хоть иногда без просмотра кода и нельзя определить, с помощью какого свойства задано расстояние. Это случается в тех случаях, когда отсутствует рамка или фон блока с содержимым.

Для установки полей или отступов в CSS от каждой стороны элемента существуют следующие свойства:

Отступы:

• padding-top: значение;
• padding-right: значение;
• padding-bottom: значение;
• padding-left: значение;

Поля:

• margin-top: значение;
• margin-right: значение;
• margin-bottom: значение;
• margin-left: значение;

Значения могут быть указаны в любых единицах CSS – px, em, % и т. д. Пример: margin-top: 15px .

Также существует очень удобная вещь как сокращенная запись margin и padding CSS . Если вам необходимо задать поля или отступы для всех четырех сторон элемента, совсем необязательно записывать свойство для каждой стороны по отдельности. Всё делается проще: для margin и padding можно указывать сразу 1, 2, 3 или 4 значения. От количества значений зависит, как распределяются настройки:

• 4 значения: задаются отступы для всех сторон элемента в такой последовательности: сверху, справа, снизу, слева: padding: 2px 4px 5px 10px;
• 3 значения: задается отступ сначала для верхней стороны, потом одновременно для левой и правой, а затем – для нижней: padding: 3px 6px 9px;
• 2 значения: задаются отступы сначала одновременно от верхней и нижней стороны, а затем – одновременно для левой и правой: padding: 6px 12px;
• 1 значение: задаются одинаковые отступы для всех сторон элемента: padding: 3px;

Те же правила касаются и свойства margin CSS. Обратите внимание на то, что для margin можно использовать и отрицательные значения (например, -3px), которые иногда бывают весьма полезными.

Схлопывание margin

Представьте ситуацию: два блочных элемента находятся друг над другом и им заданы поля margin. Для верхнего блока установлено значение margin: 60px , а для нижнего – margin: 30px . Логично было бы предположить, что два граничащих поля двух элементов просто соприкоснутся и в итоге промежуток между блоками будет равен 90 пикселям.

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

Расстояние между блоками равно большему из значений

Схлопывание margin работает только для верхних и нижних полей элементов и не относится к полям с правой и левой сторон. Окончательная величина промежутка высчитывается в разных ситуациях по-разному:

• Когда оба значения margin положительные, итоговый размер поля будет равен бóльшему значению.
• Если одно из значений является отрицательным, то для вычисления размера поля нужно получить сумму значений. Например, при значениях 20px и -18px размер поля будет равен:
  20 + (-18) = 20 — 18 = 2 пикселя.
• Если оба значения отрицательные, сравниваются модули этих чисел и выбирается число, бóльшее по модулю (следовательно, меньшее из отрицательных чисел). Пример: необходимо сравнить значения полей -6px и -8px . Модули сравниваемых чисел равны 6 и 8 соответственно. Отсюда следует, что 6 -8 . Итоговый размер поля равен -8 пикселей.
• В случае, когда значения указаны в разных единицах CSS, они приводятся к одной, после чего сравниваются и выбирается бóльшее значение.
• Размер margin для дочерних элементов определяется еще более интересно: если у потомка поле margin больше, чем у родителя, то приоритет отдается ему. В этом случае размеры верхнего и нижнего полей родителя станут такими, как задано у потомка. При этом расстояния между родителем и потомком не будет.