Какое свойство служит для задания отступов в одном объявлении
В этой статье я хотел бы рассказать, как правильно расставлять поля (padding) и отступы (margin) в CSS.
Прежде всего давайте вспомним определение полей и отступов согласно спецификации W3C. В боксовой модели (box model) поля — это расстояние между контентом (content) и границей блока (border). А отступы это расстояние между границей блока и границей соседнего или родительского элемента.
Таким образом, если граница и фон элемента не заданы, то нет разницы, использовать свойство padding или margin для задания отступов, но при условии, что ширина (width) и высота (height) элемента не заданы и не изменен алгоритм расчета размеров контента с помощью свойства box-sizing.
В любом случае следует помнить, что поля могут быть как включены в ширину или высоту элемента, так и нет. Отступы же всегда задаются снаружи элемента.
Теперь давайте рассмотрим как правильно расставлять поля и отступы между элементами. Возьмем в качестве примера следующий блок.
Это блок новостей news. Он состоит из заголовка, списка новостей и ссылки «Другие новости». Дадим им следующие названия классов: news__title, news__list и news__more-link.
<div class=”news”>
<h2 class=”news__title”>Новости</h2>
<ul class=”news__list”>
<li class=”news__list-item”>…</li>
<li class=”news__list-item”>…</li>
<li class=”news__list-item”>…</li>
</ul>
<p class=”news__more-link”><a href=”…”>Другие новости</a></p>
</div>
Поскольку каждый из этих элементов имеет одинаковые отступы слева и справа, то лучше задать поля родительскому блоку, а не задавать отступы слева и справа для каждого элемента в отдельности.
.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;
}
jsfiddle.net/onfv42mz/1
Тогда отступ появится, только если будут использоваться оба элемента. В случае же вывода только заголовка или только текста, лишнего отступа не будет.
Схлопывание вертикальных отступов
Еще один нюанс, о котором не все знают, связан с вертикальными отступами между соседними блоками. В определении отступов, которое я приводил выше, сказано, что отступ — это расстояние между границами текущего и соседнего блока. Таким образом, если мы расположим два блока друг под другом и зададим одному из них отступ снизу в 30px, а другому отступ сверху в 20px, отступ между ними будет не 50px, а 30px.
.block1 {
margin-bottom: 30px;
}
.block2 {
margin-top: 20px;
}
jsfiddle.net/j99btnc8
То есть произойдет наложение отступов, и отступ между блоками будет равен наибольшему отступу, а не сумме отступов. Этот эффект также называют «схлопыванием».
Прошу заметить, что горизонтальные отступы, в отличие от вертикальных, не «схлопываются», а суммируются. Поля (padding) также суммируются.
Зная о «схлопывании» отступов, мы можем использовать эту особенность в свою пользу. Например, если нам необходимо расставить отступы для заголовков и текста внутри статьи, то для заголовка первого уровня зададим отступ снизу в 20px, а для заголовка второго уровня отступ сверху 20px и снизу 10px, а для всех параграфов зададим отступ сверху 10px.
h1 {
margin-bottom: 24px;
}
h2 {
margin-top: 24px;
margin-bottom: 12px;
}
p {
margin-top: 12px;
}
jsfiddle.net/n27fms7s/1
Теперь заголовок h2 можно расположить как после заголовка h1, так и после параграфа. В любом случае отступ сверху не будет превышать 24px.
Общие правила
Подводя итог, я бы хотел перечислить правила, которых я придерживаюсь при расстановке полей и отступов.
- Если соседние элементы имеют одинаковые отступы, то лучше задавать их родительскому контейнеру, а не элементам.
- При задании отступов между элементами, следует учитывать, обязательный это элемент или опциональный.
- Для списка однотипных элементов — не забывать о том, что число элементов может варьироваться.
- Помнить о наложении вертикальных отступов и использовать эту особенность там, где она принесет пользу.
Источник
Свойство HTML margin используется для добавления отступа или разрыва между различными элементами. Свойство padding используется для добавления пространства между содержимым и границей (рамкой) указанного HTML-элемента.
Разницу между полем и отступом можно увидеть на следующем рисунке:
Также просмотрите демо-версию, чтобы лучше понять разницу между этими двумя свойствами.
Посмотреть демо-версию и код
У нас есть три элемента div. Первые два — со свойством HTML margin, а третий — со свойством padding. Расстояние между элементами div — это margin, а пространство между текстом внутри третьего элемента div и линией его границы — это padding.
Синтаксис, который используется для единичного объявления свойства CSS margin:
Этот код задает отступы во всех направлениях: сверху, снизу, слева и справа. Если необходимо задать отступы для разных направлений, это можно сделать с помощью следующего сокращенного объявления:
Где:
- 10px — отступ сверху;
- 20px — отступ справа;
- 30px — отступ снизу;
- 40px — отступ слева.
Также можно установить margin left HTML и другие направления отдельно:
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
Примечание: Можно использовать для определения отступа px, pts, cm и т.д.
Свойство padding можно задать с помощью единичного / сокращенного объявления или используя отдельное объявление, а для каждого направления.
Единичное объявление с одним значением:
Для каждого направления одиночным объявлением:
Если указаны четыре значения, то порядок их следования такой же, как и для свойства HTML CSS margin.
Для каждого направления в отдельности:
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
Во вступительной части я показал свойства margin и padding, используемые в элементе div. В этой демо-версии я создал список с помощью пунктов меню, которые являются ссылками. Список размещается внутри элемента div. Он содержит пункты меню в виде гиперссылок.
Список задается и другими свойствами CSS, но без использования свойств HTML margin и padding он будет выглядеть так:
Посмотреть демо-версию и код
Добавив поля 10px для ссылок внутри <ul>:
мы получим следующий вид:
Посмотреть онлайн демо-версию и код
Свойство padding добавило пространство между содержимым и границей каждой ссылки. Укажите отступ величиной в 2 пикселя в классе ссылки, и получите следующий вид:
Посмотреть онлайн демо-версию и код
Весь класс для ссылок внутри элемента <ul> будет следующим:
margin: 2px;
text-decoration: none;
color: #fff;
background-color: #DA8119;
display:block;
Ниже приводится пример использования свойства padding в HTML-таблице. Я создал таблицу с несколькими строками.
Для таблицы заданы стили с помощью различных свойств CSS. Сначала посмотрите, как выглядит таблица без применения свойства padding:
Посмотреть демо-версию и код
Добавив поля, мы получим таблицу, которая будет выглядеть следующим образом:
Посмотреть демо-версию и код
Ниже приводится код стилей, которые используются для <td>. Весь код можно увидеть, перейдя по ссылке выше:
border: dashed 1px #DF7000;
background: #D0E8AC;
color: #000;
Свойства margin padding HTML также можно применять для элементов формы: текстовых полей, кнопок и т.д.
Свойство padding, примененное к текстовому полю, задает пространство между курсором внутри текстового поля и его границей. margin добавляет отступы между различными текстовыми полями или другими элементами формы.
Чтобы стало понятнее, я создам форму и покажу разницу между полями с использованием свойств margin и padding и без. Первоначальный внешний вид формы без применения свойств margin и padding:
Добавив поля к классу текстовых полей и классу кнопки btn, мы получим форму, выглядящую следующим образом:
Поля для текстовых полей:
Поля для кнопки:
Посмотреть демо-версию и код
Чтобы увеличить или уменьшить отступы между текстовыми полями, используйте свойство HTML CSS margin. В данной демо-версии я использовал отрицательное значение для уменьшения расстояния между полями.
Поля формы будут выглядеть следующим образом:
Посмотреть демо-версию и код
После использования отрицательного значения в HTML margin расстояние между текстовыми полями уменьшилось на 3 пикселя.
Использовав свойство padding, мы увеличили расстояние между курсором внутри текстового поля и линией границы, которое задается другими свойствами. Теперь поле выглядит гораздо лучше.
Для кнопки “Save” мы также применили свойство padding:
которое используется для выравнивания текста во всех направлениях.
Данная публикация представляет собой перевод статьи «CSS padding and margin – Explained with 4 HTML elements» , подготовленной дружной командой проекта Интернет-технологии.ру
Источник
Цель этой статьи не усложнить простые вещи, а акцентировать внимание на известных стандартах, о которых почему-то забывают. Важно соблюдать осмысленную структуру во всех аспектах верстки, и не менее важно придерживаться ее в отступах. И одним из основных принципов верстки является гибкость. А именно, возможность легко вносить какие-либо изменения и ничего при этом не сломать. Правильное обращение с margin и padding играет очень большую роль в этом деле.
Ниже перечисленные принципы выполняются в среде позиционирования элементов на странице. В элементах декора тоже выполняются. Но не так категорично.
Основные принципы:
- Отступы идут от предыдущего элемента к следующему.
- Отступ задается последнему возможному элементу в доме.
- Отступы нельзя задавать для независимых элементов ( БЭМ блок ).
- У последнего элемента группы, отступ обнуляется (всегда).
Отступы идут от предыдущего элемента к следующему.
margin(ы) задаются от предыдущего элемента к следующему, от первого ко второму, сверху вниз, слева направо.
Это значит.что такие свойства как margin-left и margin-top не используются (не без исключений). С padding все немного наоборот (кроме того, что он используется для, декоративных целей, увеличения области ссылки и т.д.). Когда блоку нужен отступ сверху или слева, он его получает за счет padding-top и padding-left родителя.
Отступы идут в направлении потока дом дерева, блок сам себя не толкает.
Изначально он находится в статическом положении, и получает какое-то воздействие, за счет других.
Отступ задается последнему возможному элементу в доме
margin(ы) задаюся только между соседними элементами дом дерева.
В примере 3 списка, в следующей структуре:
<section class=”main-section”>
<div class=”main-section__item”>
<div>
<ul>
<li><a href=””>Далеко-далеко, за словесными.</a></li>
<li>…</li>
<li>…</li>
<li>…</li>
<li>…</li>
</ul>
</div>
</div>
<div class=”main-section__item”>…</div>
<div class=”main-section__item”>…</div>
</section>
Не за счет дочерних элементов, а за счет соседних делается отступ.
В этой ситуации .main-section__item и является последним возможным, кому можно задать отступ, чтоб разделить списки. Такого же эффекта можно добиться, если задать отступ диву, списку, лишке, ссылке, но это будет не правильно.
Этот пример довольно простой. Но если представить на много большую вложенность, где кто-то намусорил отступами, когда какие-то маргины схлопываются. а какие-то суммируются с падингами.
<section>
<h1>headline in a section of seven words</h1>
</section>
Если взять пример с заголовком, и нужно сделать отступ для заголовка сверху. то последний элементом будет section и для него задается padding-top, margin(ы) которые стоят по дефолту всегда нужно обнулять.
Самая простая причина, по которой стоит придерживаться данного принципа, это чтоб было проще найти отступ в будущем, либо вам, либо тому, кто будет в дальнейшем работать с вашей версткой. Это если говорить про удобство.
Настоящие проблемы могут возникнуть, когда верстка с плохой структурой отступов выводится динамически или дублируется.
Отступы нельзя задавать для независимых элементов ( БЭМ блок )
Никогда не делайте отступы элементам, которые могут использоваться больше чем один раз. Даже если вы не придерживаетесь методологий, учитывайте перспективу. Для этого есть обертки. Обертки это хорошо. Либо дополнительные классы.
Если нужно сделать блоку отступ. Без ущерба это делается с помощью:
- Наследование через элемент (если вытащить этот блок с элемента, отступа не будет, и его можно будет просто разместить в другом месте).
- Добавление класса (можно сделать блок элементом).
- Обертка (как блок, у которого роль, только в позиционировании).
.block__item > .block { margin-right: 10px; }
.block.block__item { margin-right: 10px; }
.block-wrap > .block { margin-right: 10px; }
У последнего элемента группы, отступ обнуляется (всегда)
Возьмем для примера список и изображение.
<ul>
<li><a href=””></a></li>
<li><a href=””></a></li>
<li><a href=””></a></li>
<li><a href=””></a></li>
</ul>
<img src=”” alt=””>
Это горизонтальное меню и логотип (который почему-то справа).
Между ссылками и логотипом одинаковое расстояние. Но если есть расстояние между последней лишкой и новым блоком, то этот отступ делается не за счет лишки. А список отступает.
Для последней li отступ обнуляется. И отступ делается между соседними элементами ul и img. О чем говорилось во втором принципе.
Возьмем другой пример:
<aside class=”blog-preview”>
<div class=”blog-preview__item”>
<article class=”preview-item”>
<h3 class=”preview-item__title”>…</h3>
<p class=”preview-item__desc”>…</p>
<aside class=”preview-item__meta”>
<time>10.10.10</time>
</aside>
</article>
</div>
<div class=”blog-preview__item”>…</div>
<div class=”blog-preview__item”>…</div>
</aside>
Интересует нас отступ между новостями, которые задается .blog-preview__item { margin-bottom: 20px; }. Последний margin обнуляется, а нижний отступ делается за счет padding blog-preview. О чем говорилось во втором принципе.
Чаще чем другие псевдоклассы, надо использовать :last-child.
.item:not(:last-child) {
margin-bottom: 20px;
}
// или //
.item {
// другие стили //
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
// или margin-top, основная идея здесь, не в направлении маргина, а в отсутствии лишнего //
.item + .item {
margin-top: 20px;
}
// или //
.item {
// другие стили //
& + & {
margin-top: 20px;
}
}
Исключения
- В первую очередь это добавление текстового контента через админку. Здесь отлично справляется подход к отступам заданный браузером. Но этот подход нельзя считать подходящим в обычной верстке как и несколько <br> в коде подряд.
- «Динамические элементы». Когда элемент появляется после какого-то блока, то он появится со своим отступом.
- Иногда вертикальные падинги лучше задавать дочерним блокам, нежели всей секции. Если в перспективе, на других страницах в том же месте, это относится ко второму принципу, задавать отступ для последнего возможного, вот иногда секция последний, но не возможный.
- Отрицательные маргины, auto, padding для контейнера.
Конечно есть частные случаи, нетривиальные задачи, и нюансы, при которых невозможно придерживаться этих принципов, но в остальном стоит стремиться к идеальным отступам, чтоб сделать верстку максимально чистой.
P. S. Советую ознакомиться с публикацией Кастомный подход для нормализации и сброса стилей (custom-reset.css). И советую использовать css линтеры. И кому интересно, может решить css задачку.
Источник
Цель урока: Знакомство со свойствами, задающими отступы и границы элемента CSS; свойства margin, padding, border и outline
Отступы в CSS
Элемент в html — это прямоугольник, для которого можно указать величины внутренних и внешних отступов, а также границу, которая разделяет их.
Отступы в CSS устанавливаются, например, для блочных элементов и таблиц. Рассмотрим основные свойства CSS для установки отступов:
Внешние отступы
Внешние отступы в CSS задаются при помощи свойства margin, которое устанавливает величину отступа от границ текущего элемента до внутренней границы его родительского элемента.
Свойство:
- margin-bottom (нижний отступ)
- margin-left (отступ слева)
- margin-right (отступ справа)
- margin-top (верхний отступ)
Значения:
- auto
- величина: px или em
- %
Краткая запись:
margin:10px 20px 20px 30px;
Пример:
<style type=”text/css”>
border:5px solid red; /* красная рамка */
margin:20px;
}
div{
border:5px solid green; /* зеленая рамка */
}
<body>
<div>
Агния Барто – стихи
<p>
Я на уроке в первый раз.<br/>
Теперь я ученица.<br/>
Вошла учительница в класс,-<br/>
Вставать или садиться?<br/>
</p>
…
Результат:
Агния Барто — стихи
Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?
Внутренние отступы
Внутренние отступы в css создаются при помощи свойства padding, которое устанавливает значение полей от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.
Свойства:
- padding-bottom (нижний отступ)
- padding-left (отступ слева)
- padding-right (отступ справа)
- padding-top (верхний отступ)
Значения:
- auto
- величина: px или em
- %
Краткая запись:
padding:10px 20px 20px 30px;
Пример:
<style type=”text/css”>
border:5px solid red; /* красная рамка */
padding:20px; /* внутренний отступ */
}
<body>
<p>
Я на уроке в первый раз.<br/>
Теперь я ученица.<br/>
Вошла учительница в класс,-<br/>
Вставать или садиться?<br/>
</p>
…
Результат:
Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?
Граница элемента (рамка)
Граница элемента в CSS устанавливается при помощи свойства border.
border-style (стиль границы)
Значения:
- none (без границы)
- dotted (из точек)
- dashed (пунктирная)
- solid (сплошная)
- double (двойная)
- groove (трехмерная)
- ridge (трехмерная)
- inset (трехмерная с тенью)
- outset (трехмерная с тенью)
Пример:
none
dotted
dashed
solid
border-width (ширина границы)
Значения:
- thin (тонкая)
- medium (средняя)
- thick (толстая)
- значение
Пример:
border-style:solid;
border-width:5px;
}
p.two{
border-style:solid;
border-width:medium;
}
<body>
<p class=”one”>
Я на уроке в первый раз.<br/>
Теперь я ученица.<br/>
Вошла учительница в класс,-<br/>
Вставать или садиться?<br/>
</p>
<p class=”two”>
Как надо парту открывать,<br/>
Не знала я сначала,<br/>
И я не знала, как вставать,<br/>
Чтоб парта не стучала.<br/>
</p>
Результат:
Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?
Как надо парту открывать,
Не знала я сначала,
И я не знала, как вставать,
Чтоб парта не стучала.
border-color (цвет границы)
Значения:
- red (цвет)
- rgb(255,0,0) (в системе rgb)
- #ff0000 (в шестнадцатиричной системе)
- transparent (прозрачная)
Для каждой стороны границы можно задать свой стиль:
border-top-style:solid;
border-right-style:dotted;
border-bottom-style:dashed;
border-left-style:none;
border-top-color:#0f0;
border-right-color:#f00;
}
Результат:
Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?
Краткая запись:
border: 1px solid #000;
Внешние границы (outline)
Внешние границы в CSS создаются при помощи свойства outline, одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырех сторонах элемента. В отличие от линии, задаваемой через border, свойство outline не влияет на положение блока и его ширину.
outline-color (цвет)
Значения:
- red (цвет)
- rgb(255,0,0) (в системе rgb)
- #ff0000 (в шестнадцатеричной системе)
- invert (инвертированный, противоположный)
outline-width (ширина)
Значения:
- thin (тонкая)
- medium (средняя)
- thick (толстая)
- значение
outline-style (стиль границы)
Значения:
- none (без границы)
- dotted (из точек)
- dashed (пунктирная)
- solid (сплошная)
- double (двойная)
- groove (трехмерная)
- ridge (трехмерная)
- inset (трехмерная с тенью)
- outset (трехмерная с тенью)
Краткая запись:
outline: #0f0 solid thick;
Некоторые приемы с границей
Рамка вокруг изображения
Пример:
padding:20px; /* Поля вокруг изображения */
margin-right:10px; /* отступ справа */
margin-bottom:10px; /* отступ снизу */
outline:1px solid #666; /* параметры границы */
background:#f0f0f0; /* цвет фона */
}
Результат:
Двойная рамка с использованием CSS
Пример:
border:5px solid red;
outline:6px solid orange;
}
Результат:
Путь осилит идущий,
И поэтому я иду.
Через горы и пущи,
Через радость мою и беду.
Эффектные рамки для изображений
Пример:
.photo {
width : 150px;
padding : 10px 10px 20px 10px;
border : 1px solid #BFBFBF;
background-color : white;
-webkit-box-shadow : 2px 2px 3px rgba(135, 139, 144, 0.4);
-moz-box-shadow : 2px 2px 3px rgba(135, 139, 144, 0.4);
box-shadow : 2px 2px 3px rgba(135, 139, 144, 0.4);
}
<body>
<div class=”photo”>
<img src=”2.JPG” width=”150″ alt=””>
<p>Не ешь меня!!!</p>
</div>
…
Результат:
Источник