Схлопывание отступов css: Всё, что вам нужно знать про CSS Margin | by Рома Зварич

правила объединения, работа с дочерними и родительскими элементами

От автора: схлопывание отступов CSS — это то, что упоминается в каждой первой или второй главе каждой книги по CSS. Когда я давным-давно начинал изучать таблицы стилей, я конечно, читал и об этом. Эти воспоминания немного затерлись, поэтому пришло время освежить мои знания, давайте начнем!

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

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

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

Схлопывание отступов работает только со значениями margin-top и margin-bottom.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Несколько отступов

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

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

Наличие родительского div может дать неожиданный результат, потому что ваш внутренний элемент — с отступом — может выходить за границы родительского элемента. Очевидно, проблемы могут возникать с первым и последним дочерними элементами.
Я использую в примерах значения пикселях, но в реальных проектах лучше использовать для отступов относительные единицы.
В нашем демонстрационном примере у нас есть два абзаца — второй внутри div — и один элемент div. Для .second-paragraph задано значение margin-bottom в 20px, для .third-paragraph задано значение margin-top в 60px и для div задано margin-top ноль (ноль также имеет значение). И значение 60px перекрывает другие и определяет отступ между этими элементами. Математика проста — большее значение перекрывает меньшее.

В примере CodePen я попытался проиллюстрировать отступы: верхний имеет розовый цвет, нижний — зеленый цвет, когда они объединяются, вы видите голубовато-серый цвет (потому что они перекрывают друг друга). Блок div имеет светло-желтый фон. На первый взгляд это может показаться немного хаотичным, но если вы посмотрите код, вы поймете, в чем суть.

Отступы не объединяются, когда

Бывают случаи, когда мы хотим контролировать или отключить схлопывание отступов; как правило, это актуально, когда у нас есть отношение родитель-потомок:

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

В случае margin-bottom, если между родительским и последним дочерним элементом есть какие-либо поля, границы, встроенные элементы или height (height, min-height, max-height).

Также отступ дочернего элемента не объединяется при использовании объявления display: flex; для контейнера.

Объявление overflow: auto; (работает со всеми значениями, кроме visible) для родительского элемента, также предотвращает схлопывание отступов.

Элементы, отображаемые со значениями table-cell или table-row, также не будут схлопываться, потому что эти элементы не имеют отступов.

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

В случае соседних элементов одного уровня схлопывание не происходит, когда последний элемент очищает float.

Использование отрицательных отступов

Мы также можем задавать отступы с отрицательными значениями. Если у вас есть положительное (100px) и отрицательное (-50px) значения, суммарный отступ будет определяться, как положительный — отрицательный: 100px + (-50px) = 50px.

Если у вас есть два отрицательных значения, учитывается большее по модулю отрицательное значение (не то, которое ближе к нулю). Например, если у нас есть -100px и -50px, будет учитываться -100px.

Полезные ссылки

Для получения дополнительной информации о контексте с блочным форматированием посетите сайт MDN.

Автор: Adam Laki

Источник: //pineco.de/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

CSS блочная модель

Модуль CSS Box Model описывает свойства padding и margin, которые создают поля внутри и отступы снаружи CSS блока. Размеры блока также могут быть увеличены за счет рамки.

Каждый блок имеет прямоугольную область содержимого в центре, поля вокруг содержимого, рамку вокруг полей и отступ за пределами рамки. Размеры этих областей определяют свойства padding и его подсвойства — padding-left, padding-topи т.д., border и его подсвойства, margin и его подсвойства.

CSS блочная модель в деталях

1. Определение блочной модели

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

margin

• край содержимого
• край поля
• край рамки
• край отступа

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

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

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

* {
 margin: 0;
 padding: 0;
 }

2. Отступы элемента

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

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

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

• Область содержимого

  margin-bottom: 30px; width: 100%; display: inline-block;

• Область содержимого

  margin-top: 15px; width: 100%; display: inline-block;

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

Отступы не схлопываются:

• Между плавающим блоком и любым другим блоком;
• У плавающих элементов и элементов со значением overflow, отличным от visible, со своими дочерними элементами в потоке;
• У абсолютно позиционированных элементов, даже с их дочерними элементами;
• У строчно-блочных элементов.

Для предотвращения проблемы схлопывания рекомендуется задавать для всех элементов только верхний или нижний

2.2. Выпадание вертикальных отступов

Если внутри одного блока расположить другой блок и задать ему margin-top, то внутренний блок прижмется к верхнему краю родительского, а у родительского элемента появится отступ сверху, т.е. внутренний блок «выпадет» из родительского блока. Если у родительского элемента также был задан верхний отступ, то выберется наибольшее из значений.

Чтобы избавиться от эффекта выпадания, можно задать родительскому элементу padding-top или добавить border-top: 1px solid transparent.

2.3. Физические свойства отступов: свойства margin-top, margin-right, margin-bottom, margin-left

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

Свойства не наследуются.

Синтаксис

margin-top: 20px;
margin-right: 1em;
margin-bottom: 5%;
margin-left: auto;
margin-top: inherit;
margin-right: initial;

2.4. Краткая запись отступов: свойство margin

Свойство margin является сокращенным свойством для установки

Если существует только одно значение, оно применяется ко всем сторонам.

Если два — верхний и нижний отступы устанавливаются на первое значение, а правый и левый — устанавливаются на второе.

Если имеется три значения — верхний отступ устанавливается на первое значение, левый и правый — на второе, а нижний — на третье.

Если есть четыре значения — они применяются сверху, справа, снизу и слева соответственно.

3. Поля элемента

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

Фоны элемента по умолчанию закрашивают поля элемента и пространство под его рамкой. Это поведение можно настроить с помощью свойств background-origin и background-clip.

3.1. Физические свойства полей: свойства padding-top, padding-right, padding-bottom, padding-left

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

Свойства не наследуются.

Синтаксис

padding-top: 0.5em;
padding-right: 0;
padding-bottom: 2cm;
padding-left: 10%;
padding-top: inherit;
padding-bottom: initial; 

3.2. Краткая запись полей: свойство padding

Свойство padding является сокращенным свойством для установки padding-top, padding-right, padding-bottom и padding-left в одном объявлении.

Если существует только одно значение, оно применяется ко всем сторонам.

Если есть два значения, верхнее и нижнее поля устанавливаются на первое значение, а правое и левое — на второе.

Если имеется три значения, верхнее поле устанавливается на первое значение, левое и правое — на второе, а нижнее — на третье.

Если есть четыре значения — они применяются сверху, справа, снизу и слева соответственно.

4. Рамки элемента

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

По материалам CSS Box Model Module Level 3

Схлопывание отступов (margin) в CSS

Бывают моменты, когда вертикальные отступы верхнего и нижнего margin приводят начинающего верстальщика в недоумение. Рассмотрим такой вариант на примере:

HTML

<div class=”center”>
   <h2>Заглавие</h2>
   <p>Текст</p>
   <p>С абзацами</p>
   <ol>
      <li>Списком</li>
      <li>Строка2</li>
   </ol>
</div>

CSS

.center {
   margin-top: 10px;
   margin-bottom: 5px;
}
p {
   margin: 15px 0px;
}
ol {
   margin-top:20px
}
li {
   margin: 35px;
}

Верстальщик ожидает увидеть следующее:

Однако на практике получается совсем другая картина:

И тогда появляется вопрос: почему нет некоторых отступов?

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

Схлопывание маржина – это наплывание граничных отступов друг на друга.

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

Как это выглядит на практике?

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

HTML

<img src=”#” title=”Рисунок 1”>
<p>Подпись</p>

CSS

img {
   margin-bottom:25px;
}
p {
   margin-top:10px;
}

Вопреки ожиданием отступ между картинкой и её подписью не будет равен 35 px, больший маржин поглотит меньший, следовательно, картинку и её подпись разделит путь в 25 px.

Дочерние элементы и их родители

HTML

<h2>Заглавие основного текста</h2>
<p>Родительский элемент<span>Дочерний элемент</span></p>

CSS

p{
   margin: 10px 0px;
}
span{
   margin: 30px 0px;
}

В таком случае отступ от тэга h2 и тэга pбудет равен 30px. Следовательно, дочерний элемент, у которого отступ больше, потянет за собой и родителя, а родительский отступ схлопнется с дочерним.

Единственным вариантом, когда отступы суммируются является случай если они имеют разноимённые знаки (один имеет знак +, другой знак -)

Чем это поможет?

Это свойство вертикального margin пригодится при разметке текста. Так к примеру если тэгу p задать:

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

Когда схлопывание не происходит?

Схлопывания не произойдёт, если:

1. У элемента есть некий paddingили border;
2. Блок является корневым;
3. Блок или дочерний элемент плавающий;
4. Блок имеет абсолютную позицию;
5. Блок или дочерний элемент является строчным.
6. У блока установлен отличающийся от стандартного контекст форматирования.

Оценок: 4 (средняя 5 из 5)

• 6286 просмотров

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное

Устранение схлопывания margin | Vaden Pro

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

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

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

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

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

Схлопывание между смежными объектами

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

Однако в таком случае возникает одно неудобство – отсутствие гибкости в расположении элементов. К примеру, первый или последний элемент должен иметь особы отступ, не такой как у всех элементов. В таком случае нужно будет прибегнуть к псевдоклассам :first-child или :last-child.

Схлопывание между родителем и потомком

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

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

Еще одним неплохим решением в данных условиях будет обращения к свойству overflow. Схлопывание будет устранено, если значение свойства будет не visible, а какое-нибудь другое. Также необходимым условием для работы метода является наличие фиксированного размера ширины или высоты объекта.

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

Удаление схлопывания для смежных элементов и между родителем и потомком одновременно

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

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

1. Использование свойства не по назначению
2. Не сработает, если для объекта уже были указаны границы
3. Также не сработает при наличии полицветного фона.
4. Для IE6 толщина границы будет входит в перерасчет высоты блока, что необходимо учитывать.

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

Расположить элементы посредством абсолютного позиционирования. В этом случае за объектом не будет закреплено место в структуре страницы. Это не всегда желательный эффект.

Схлопывание не происходит, когда блок обладает свойствами плавающего объекта. Проблема этой методики идентична с абсолютным позиционированием – выпадение из общей структуры.

В каких браузерах работает?

Оценок: 3 (средняя 5 из 5)

• 1418 просмотров

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное

Все, что вам нужно знать о свойстве margin в CSS

Перевод статьи «Everything You Need To Know About CSS Margins».

Когда мы начинаем изучать CSS, одной из первых мы осваиваем тему блочной модели. Свойство margin — часть этой модели. Это свойство определяет прозрачное пространство вокруг блока, отодвигающее от этого блока другие элементы. Свойства margin-top, margin-right, margin-bottom и margin-left были описаны еще в CSS1, наряду со свойством margin, позволяющим задать все отступы одновременно.

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

Блочная модель в CSS

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

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

В CSS1 блочная модель была изображена в виде ASCII-диаграммы, как показано на иллюстрации:

Все четыре свойства margin (по одному для каждой стороны) и сокращенный вариант написания (просто margin) были определены еще в CSS1.

В спецификации CSS2.1 есть иллюстрация, показывающая блочную модель и также определяющая термины, которые мы все еще используем для описания различных блоков. В этой спецификации описаны content box, padding box, border box и margin box. Каждый из этих блоков определяется краями контента, внутреннего оступа, границы и внешнего отступа соответственно.

Сейчас у нас есть спецификация блочной модели в третьей версии. Определения блочной модели (и в частности внешних отступов) в ней такие же, как в CSS2, поэтому в нашей статье мы будем пользоваться последними.

Схлопывание внешних отступов

Спецификация CSS1, определяя внешние отступы, также определяла такое явление как схлопывание (collapse) вертикальных внешних отступов. С тех самых пор это поведение является причиной постоянного раздражения при работе с margin.

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

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

Внешние отступы схлопываются в разных ситуациях. Рассмотрим их по очереди, а затем разберемся, как предотвратить схлопывание.

Смежные блоки-сиблинги

(Вообще сиблинги — собирательное определение детей одних родителей, т. е., братья и сестры. Здесь имеются в виду одноранговые блоки, скажем, идущие подряд абзацы, — прим. перев.).

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

В примере, приведенном ниже, у нас есть три элемента div. У первого есть верхний и нижний margin в 50 px. У второго тоже есть такие отступы, но по 20 px. У третьего есть верхний и нижний margin по 3 em.

See the Pen Smashing: margins, adjacent siblings by rachelandrew (@rachelandrew) on CodePen.

В итоге расстояние между первым и вторым элементом — 50 px, потому что меньший margin в 20 px поглотился большим. А отступ между вторым и третьим элементами — 3 em, потому что 3 em больше, чем 20 px (нижний margin второго элемента).

Полностью пустые блоки

Если блок пустой, его внешние отступы (верхний и нижний) могут схлопнуться друг с другом. В следующем примере элемент с классом empty имеет верхний и нижний margin (по 50 px каждый). Но в итоге расстояние между первым и третьим элементами не 100 px, а 50 px. Так получилось, потому что верхний и нижний отступы схлопнулись. Если в этот пустой блок добавить что-нибудь (хотя бы даже внутренний отступ — padding), схлопывание внешних отступов не произойдет.

See the Pen Smashing: margin collapsing on an empty element by rachelandrew (@rachelandrew) on CodePen.

Родительский элемент и первый или последний потомок

Этот сценарий чаще всего застает людей врасплох, потому что он не то чтобы сильно интуитивен. В следующем примере у нас есть элемент div с классом wrapper. Также ему назначена красная обводка, чтобы его было лучше видно. Все три элемента-потомка имеют margin в 50 px (т. е., внешние отступы со всех сторон). Но в результате мы не получаем отступа от верхней и нижней границы родительского элемента.

See the Pen Smashing Margins: margin on first and last child by rachelandrew (@rachelandrew) on CodePen.

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

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

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

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

Что может предотвратить схлопывание внешних отступов

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

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

Например, отступы совершенно пустого блока не схлопнутся с отступами верхнего и нижнего блоков, если этот пустой блок имеет границу или внутренний отступ. В приведенном ниже примере я добавила в пустом блоке padding в 1 px. Теперь над ним и под ним появились внешние отступы в 50 px.

See the Pen Smashing: empty boxes with padding do not collapse margins by rachelandrew (@rachelandrew) on CodePen.

За таким поведением стоит определенная логика. Если блок совершенно пуст, не имеет обозначенных границ или внутренних отступов, он попросту невидимый. Это может быть, например, пустой абзац, добавленный в разметку вашей CMS. Если ваша CMS добавляет лишние элементы вроде абзацев, вы, вероятно, не захотите, чтобы из-за этого появлялись огромные промежутки между абзацами (а они появились бы благодаря отступам). Добавьте в пустой блок что угодно — и вы получите эти промежутки.

Аналогичное поведение мы можем наблюдать у отступов первого и последнего потомка, которые схлопываются с родительскими отступами. Если мы добавим границу (border) для родительского элемента, отступы элементов-потомков останутся внутри.

See the Pen Smashing Margins: margin on first and last child doesn’t collapse if the parent has a border by rachelandrew (@rachelandrew) on CodePen.

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

Создание блочного контекста форматирования

Новый блочный контекст форматирования также предотвращает схлопывание внешних отступов. Если мы вернемся к примеру с первым и последним потомком, когда внешние отступы выходили за пределы wrapper, и установим для wrapper свойство display: flow-root, это создаст новый блочный контекст форматирования и в результате отступы останутся внутри обертки.

See the Pen Smashing Margins: a new block formatting context contains margins by rachelandrew (@rachelandrew) on CodePen.

Если хотите узнать больше о свойстве display: flow-root, почитайте статью “Understanding CSS Layout And The Block Formatting Context”. Изменение значения свойства overflow на auto даст тот же эффект. Это тоже создаст новый блочный контекст форматирования, хотя может привести к появлению полос прокрутки, а это порой нежелательно.

Контейнеры Flex и Grid

Flex и Grid-контейнеры устанавливают Flex и Grid-контексты форматирования для своих потомков, а потому их поведение будет отличаться от блочного макета. Одно из отличий — внешние отступы не схлопываются.

Если мы возьмем пример, который обсуждали выше, и превратим wrapper во flex-контейнер с отображением элементов с flex-direction: column, мы увидим, что теперь внешние отступы содержатся внутри обертки. Кроме того, внешние отступы между смежными flex-элементами не схлопываются друг с другом, в результате чего мы получаем расстояние в 100 px между ними (50 px нижнего отступа одного элемента плюс 50 px верхнего отступа другого).

See the Pen Smashing Margins: margins on flex items do not collapse by rachelandrew (@rachelandrew) on CodePen.

Стратегии использования margin на вашем сайте

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

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

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

Идеальным вариантом было бы при необходимости давать компонентам display: flow-root. В качестве запасного варианта для старых браузеров для создания нового блочного контекста форматирования можно использовать overflow, превращать родительский элемент во flex-контейнер или добавлять какой-нибудь пиксель внутреннего отступа. Не забывайте, что вы можете использовать функционал запросов для определения поддержки для display: flow-root — чтобы только старые браузеры получали менее оптимальное решение.

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

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

И в завершение статьи давайте рассмотрим еще пару интересных вещей об отступах.

Указание значения margin в процентах

При использовании процентов в CSS всегда следует помнить о том, проценты от чего имеются в виду. Если вы задаете размеры margin и padding в процентах, это всегда проценты от inline-размера родителя (ширина в horizontal writing mode). Это означает, что при использовании процентов у вас будет одинаковый внутренний отступ со всех сторон элемента.

Рассмотрим пример. У нас есть обертка (wrapper) шириной в 200 px. Внутри — блок с margin: 10%. То есть, внешний отступ будет по 20 px со всех сторон, потому что 20 px это 10% от 200 px.

See the Pen Smashing Margins: percentage margins by rachelandrew (@rachelandrew) on CodePen.

Внешние отступы в «относительнопоточном мире»

В этой статье мы все время говорили о вертикальных отступах. Но в современном CSS появилась тенденция говорить о направлении в относительном ключе, а не в физическом смысле. Говоря о вертикальных отступах, мы на самом деле говорим об отступах в блочном измерении. Они могут быть верхними и нижними — если мы в horizontal writing mode (когда чтение идет слева направо и сверху вниз), но в vertical writing mode отступы становятся левыми и правыми.

Когда мы употребляем логические направления (относительно потока), нам проще говорить про начало и конец блока, а не про верх и низ. Чтобы упростить все это, CSS представил спецификацию логических свойств и значений. Она сопоставляет «относительнопоточные» свойства и физические.

Что касается внешних отступов, у нас есть следующие варианты (если мы работаем с английским языком и прочими языками, где чтение текста идет слева направо):

• margin-top = margin-block-start
• margin-right = margin-inline-end
• margin-bottom = margin-block-end
• margin-left = margin-inline-start

У нас также есть два новых стандарта, позволяющие устанавливать оба блочных и оба строчных отступа:

• margin-block
• margin-inline

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

See the Pen Smashing margins: flow relative margins by rachelandrew (@rachelandrew) on CodePen.

Дополнительно по теме логических свойств и значений можно почитать вот эту статью или MDN.

Итоги

Теперь вы знаете большую часть того, что вообще стоит знать о внешних отступах! Кратко повторим:

• Схлопывание отступов имеет большое значение. Понимание того, когда схлопывание происходит, а когда — нет, поможет вам решить любые связанные с ним проблемы.
• Если вы будете задавать внешние отступы только для одного направления, это избавит вас от многих проблем со схлопыванием.
• Как и во всех прочих случаях, следует делиться с командой теми решениями, которые вы приняли, и оставлять комментарии в коде.
• Если вы будете думать о направлениях в блочном и строчном измерении, а не в физическом (верх/низ, лево/право), вам будет легче привыкнуть к тому, что веб становится независящим от направления письма.

поля и отступы — учебник CSS

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

Создавать промежутки между элементами можно и тем, и другим способом, но если 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 значения. От количества значений зависит, как распределяются настройки:

Те же правила касаются и свойства 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, то есть, -6 > -8. Итоговый размер поля равен -8 пикселей.
• В случае, когда значения указаны в разных единицах CSS, они приводятся к одной, после чего сравниваются и выбирается бóльшее значение.
• Размер margin для дочерних элементов определяется еще более интересно: если у потомка поле margin больше, чем у родителя, то приоритет отдается ему. В этом случае размеры верхнего и нижнего полей родителя станут такими, как задано у потомка. При этом расстояния между родителем и потомком не будет.

Далее в учебнике: блочные и строчные элементы HTML, свойство display CSS.

Отступ со всех сторон в css. Изменить отступы и расстояние сверху на CSS

Задача

Убрать отступы вокруг маркированного или нумерованного списка.

Решение

Используйте стилевое свойство margin и padding с нулевым значением для селектора UL или OL , в зависимости от типа списка, как показано в примере 1.

Пример 1. Отступы в списке

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Чебурашка
• Крокодил Гена
• Шапокляк

Результат данного примера показан на рис. 1.

Рис. 1. Список без вертикальных и горизонтальных отступов

Обратите внимание, что исчезают маркеры списка, которые оказываются за левым краем веб-страницы. Чтобы убрать только верхний и нижний отступ, не сдвигая при этом список влево, используйте свойства margin-top и margin-bottom (пример 2).

Пример 2. Отступы в списке

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Чебурашка
• Крокодил Гена
• Шапокляк

Для более красивого отображения элементов на web-странице применяют внешний и внутренний отступы в css и на примерах мы это сейчас разберём.

Каждый элемент, будь это параграф, div, картинка или видео, — это некий блок, в котором можно сделать отступы как внутри с помощью свойства padding , так и снаружи с помощью margin .

В css прописываются эти свойства для отступов таким образом (для примера взят параграф):

Вместо тега P вы пропишите свой элемент разумеется, для которого будут применены отступы.

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

Значения отступов.

• Первое значение: отступ сверху;
• Второе значение: отступ справа;
• Третье значение: отступ снизу;
• Четвёртое значение: отступ слева.

В данном примере я сделал margin внешний отступ в css таким образом: сверху я прописал 20px , слева и справа по 10px (как правило они для симметрии прописываются одинаковые), и снизу указал 30px .

А для padding внутреннего отступа я указал: по 10px сверху, слева и справа, и 14px снизу.

Значение для отступов в свойствах margin и padding можно сокращать, при условии если они имеют одинаковую величину.
Из моего примера сокращённая запись будет иметь такой уже вид:

То есть, когда отсутствует последняя числовая запись, в данном случае для отступа слева, то браузер автоматически подставляет для отступа слева такое же значение как и у значения справа.
И в моём случае отступы справа и слева будут по 10px что в margin , что в padding .

А если у вас одинаковые величины для внешних отступов сверху и снизу (к примеру: 16px ), и так же одинаковые величины для внешних отступов слева и справа (к примеру: 20px ), то запись будет иметь ещё более сокращённый вид:

Соответственно для внутреннего отступа css запись делается идентично этой.

Применение одинарных отступов: для каждой стороны отдельно.

Для указания отдельного отступа применяются следующие свойства с одним значением:

Свойства отступа для каждой стороны.

• margin-top: 3px; внешний верхний отступ;
• margin-left: 4px; внешний левый отступ;
• margin-right: 6px; внешний правый отступ;
• margin-bottom: 10px; внешний нижний отступ.

Точно так же прописываются записи и для внутренних отступов, только нужно заменить margin на padding .

К примеру у вас для всех картинок img уже прописаны в css все отступы.

То есть (для уяснения) внешний отступ имеет такие значения: сверху 10px , слева и справа: по 20px , и снизу 14px .
А внутренний отступ равен по 6px со всех 4-ёх сторон.

Допустим, вы решили поставить ещё картинку на страницу, но для неё вы хотите изменить только внешний отступ сверху, а остальные оставить как есть. И для выполнения этой задачи достаточно прописать class для этой картинки, и добавить в css дополнительную запись.

В итоге, добавленная вами картинка с классом verx примет все отступы прописанные в css для тега img , и изменит только внешний отступ для верхней стороны (в нашем случае: 40px ).

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

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

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

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

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

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

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

Здравствуйте, уважаемые читатели блога сайт! Сегодня мы продолжим изучение каскадных таблиц стилей или CSS. В прошлых статьях мы уже рассмотрели в общих чертах блочную верстку сайта. В результате у нас стали получаться вполне профессиональные web-страницы, но чего-то им не хватает. А не хватает им скорей всего отступов и рамок. Сегодня мы и займемся рассмотрением стилевых правил margin, padding и border, которые позволяют задавать отступы и рамки для html-элементов.

Параметры отступов в CSS

С помощью каскадных таблиц стилей существует возможность задавать отступы двух видов.

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

2. Внешний отступ — расстояние между границей текущего элемента веб-страницы и границами соседних элементов, либо родительского элемента. Размер расстояния регулируется свойством margin . Такой отступ находится вне элемента.

Для наглядности картинка:

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

Внутренние отступы в CSS с помощью padding (top, bottom, left, right)

Свойства стиля padding-left, padding-top, padding-right и padding-bottom позволяют задать величины внутренних отступов, соответственно, слева, сверху, справа и снизу элемента web-страницы:

padding-top | padding-right | padding-bottom | padding-left: значение | проценты | inherit

Величину отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. При указании процентов, значение считается от ширины элемента. Значение inherit указывает, что оно наследуется от родителя.

Например, для текущего абзаца я применил правило стиля, задающий левый отступ 20 пикселей, верхний отступ 5 пикселей, справа отступ 35 пикселей и снизу 10 пикселей. Запись правила в будет выглядеть следующим образом:

p.test{
padding-left:20px;
padding-top:5px;
padding-right:35px;
padding-bottom:10px
}

Сборное правило padding позволяет указать отступы сразу со всех сторон элемента веб-страницы:

padding: [ [ []]]

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

• если указать одно значение, то оно установит величину отступа со всех сторон элемента страницы;
• если указать два значения, то первое задаст величину отступа сверху и снизу, а второе — слева и справа;
• если указать три значения, то первое определит величину отступа сверху, второе — слева и справа, а третье — снизу;
• если указаны четыре значения, то первое установит величину отступа сверху, второе — справа, третье — снизу, а четвертое — слева.

Таким образом правило CSS приведенное выше можно максимально сократить и записать следующим образом:

p.test{ padding:5px 35px 10px 20px}

Свойство margin или внешние отступы в CSS

Атрибуты стиля margin-left, margin-top, margin-right и margin-bottom позволяют задать величины внешних отступов, соответственно, слева, сверху, справа и снизу:

margin-top | margin-right | margin-bottom | margin-left: |auto|inherit

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

Величину отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах:

p {
margin-left: 20px;
}
h2{
margin-right:15%;
}

Значение auto означает, что размер отступов будет автоматически рассчитан браузером. В случае использования процентной записи, то отступы рассчитываются в зависимости от ширины родительского контейнера . Причем это относится не только к margin-left и margin-right, но и для margin-top и margin-bottom отступы в процентах будут рассчитываться в зависимости от ширины, а не высоты контейнера.

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

p{
margin-left:-20px;
}

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

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

margin: [ [ []]]

Данное свойство в случае задания одного, двух, трех или четырех значений отступов подчиняется тем же законам, что и правило padding.

Параметры рамки с помощью свойства border

При настройке рамок существует три типа параметров:

• border-width — толщина рамки;
• border-color — цвет рамки;
• border-style — тип линии с помощью которой будет нарисована рамка.

Начнем с параметра толщины рамки:

border-width: [значение | thin | medium | thick] {1,4} | inherit

Толщину рамки можно задавать в пикселях, либо в других доступных в css единицах. Переменные thin, medium и thick задают толщину рамки в 2, 4 и 6 пикселей соответственно:

border-width:medium;

Как и для свойств padding и margin, для параметра border-width разрешается использовать одно, два, три или четыре значения, задавая таким образом толщину рамки для всех сторон сразу или для каждой по отдельности:

border-width: 5px 3px 5px 3px

Для текущего абзаца сделаем толщину верхней рамки 1px, правой 2px, нижней 3px, а левой 4px с помощью правила {border-width: 1px 2px 3px 4px;}

С помощью атрибутов стиля border-left-width, border-top-width, border-right-width и border-bottom-width можно задавать толщину, соответственно, левой, верхней, правой и нижней сторон рамки:

border-left-width|border-top-width|border-right-width|border-bottom-width: thin|medium|thick||inherit

Следующий параметр border-color с помощью которого можно управлять цветом рамки :

border-color: [цвет | transparent] {1,4} | inherit

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

p {border-width: 2px; border-color: red}

Значение transparent устанавливает прозрачный цвет рамки, а inherit наследует значение родителя. По умолчанию, если цвет рамки не задан, то будет использоваться тот, который используется для шрифта внутри данного элемента.

С помощью атрибутов стиля border-left-color, border-top-color, border-right-color и border-bottom-color можно задать цвет, соответственно, левой, верхней, правой и нижней сторон рамки:

border-left-color|border-top-color|border-right-color|border-bottom-color: transparent||inherit

И последний параметр border-style задает тип рамки :

border-style: {1,4} | inherit

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

Атрибуты стиля border-left-style, border-top-style, border-right-style и border-bottom-style задают стиль линий, которыми будет нарисована, соответственно, левая, верхняя, правая и нижняя сторона рамки:

border-left-style|border-top-style|border-right-style|border-bottom-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit

Как и для параметров внешних и внутренних отступов, для рамки существует универсальное свойство border . Оно позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента:

border: | inherit

Значения могут идти в любом порядке, разделяясь пробелами:

td {border: 1px solid yellow}

Для установки границы только на определенных сторонах элемента существуют свойства border-top, border-bottom, border-left, border-right, которые позволяют задать параметры соответственно для верхней, нижней, левой и правой стороны рамок.

Осталось только подвести итоги:

• для задания внутренних отступов пользуемся свойством padding ;
• для настройки внешних отступов существует правило margin ;
• параметры рамок задаются с помощью атрибута border .

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

На этом все, до новых встреч!

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

На рисунке ниже наглядно представлены параметры отступов блоков:

Как видно, отступы можно делать в четырех направлениях: верхний отступ (top), нижний отступ (bottom), левый отступ (left) и правый отступ (right). В качестве единиц измерения могут быть пиксели, проценты и другие единицы CSS — подробнее о них . В уроке используются пиксели.

Внутренние отступы блоков

За внутренние отступы в CSS отвечает свойство padding . Итак, давайте рассмотрим пример задания внутренних отступов у блока:

padding-top: 5px; /*верхний внутренний отступ*/ padding-left: 8px; /*левый внутренний отступ*/ padding-right: 8px; /*правый внутренний отступ*/ padding-bottom: 5px; /*нижний внутренний отступ*/

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

margin: 5px 8px 5px 8px; /*верхний, правый, нижний, левый внешние отступы*/ margin: 5px 8px 5px; /*описывает верхний, левый и правый, нижний отступы*/ margin: 5px 8px; /*описывает верхний и нижний, правый и левый отступы*/ margin: 7px; /*описывает все внутренние отступы по 7px*/

Запомнить проще первый и последний способы. В первом случае отступы ставятся по часовой стрелке (верхний, правый, нижний, левый) — величину отступа мы можем указать любую, в последнем случае отступы со всех сторон будут одинаковые.

Внешние отступы блоков

За внешние отступы в CSS отвечает свойство margin . Примеры внешних отступов в CSS:

margin-top: 5px; /*верхний внешний отступ*/ margin-left: 10px; /*левый внешний отступ*/ margin-right: 10px; /*правый внешний отступ*/ margin-bottom: 5px; /*нижний внешний отступ*/

padding: 5px 10px 5px 10px; /*верхний, правый, нижний, левый внешние отступы*/ padding: 5px 10px 5px; /*описывает верхний, левый и правый, нижний отступы*/ padding: 5px 10px; /*описывает верхний и нижний, правый и левый отступы*/ padding: 7px; /*описывает все внешние отступы по 7px*/

Таким образом, как сделать отступы в CSS — вопрос не сложный, но весьма актуальный. Чтобы лучше усвоить описанную выше информацию следует запомнить, что существует два свойства: padding — внутренние отступы и margin — внешние отступы. Также, как вы уже знаете, способов задания отступов существует несколько, можно их использовать.

Свертывание поля мастеринга — CSS: каскадные таблицы стилей

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

Обрушение маржи происходит в трех основных случаях:

Соседние братья и сестры

Поля соседних братьев и сестер сворачиваются (кроме тех случаев, когда последний брат необходимо очистить после плавающих элементов).

Нет содержимого, разделяющего родителей и потомков

Если не созданы граница, заполнение, встроенная часть, контекст форматирования блока или зазор для отделения верхнего поля блока от верхнего поля одного или нескольких его дочерних блоков; или без рамки, заполнения, встроенного содержимого, height , min-height или max-height , чтобы отделить margin-bottom блока от margin-bottom одного или нескольких его потомков блоки, затем эти поля разрушаются.Свернутое поле выходит за пределы родительского.

Пустые блоки

Если нет рамки, отступов, встроенного содержимого, height или min-height , чтобы отделить margin-top блока от его margin-bottom , то его верхнее и нижнее поля схлопываются.

Некоторые примечания:

• Более сложное схлопывание полей (более двух полей) происходит при объединении вышеуказанных случаев.
• Эти правила применяются даже к нулевым полям, поэтому поле потомка оказывается за пределами своего родителя (в соответствии с правилами выше) независимо от того, равно ли поле родителя нулю.
• Когда задействованы отрицательные поля, размер свернутого поля представляет собой сумму наибольшего положительного поля и наименьшего (наиболее отрицательного) отрицательного поля.
• Когда все поля отрицательные, размер свернутого поля является наименьшим (самым отрицательным) полем. Это относится как к смежным элементам, так и к вложенным элементам.

HTML

  
 Нижнее поле этого абзаца свернуто… 
… с верхним полем этого абзаца, что дает поле  1.2 брем  между ними 

 Этот родительский элемент содержит два абзаца!
  
 У этого абзаца есть поле  .4rem  между ним и текстом выше. 
  
 Мое нижнее поле сжимается вместе с моим родителем, в результате чего нижнее поле составляет  2rem . 


 Я нахожусь  2rem  ниже элемента выше. 
  

CSS

  div {
  маржа: 2 бэр 0;
  фон: бледно-лиловый;
}

п {
  поле: .4рем 0 1,2рем 0;
  фон: желтый;
}  

Результат

• Ключевые концепции CSS: Синтаксис CSS, по правилу Комментарии, специфичность и наследование, коробка, режимы компоновки и модели визуального форматирования, и падение маржи, или начальный, вычислено, решено, указано, использовал, и фактические значения. Определения синтаксиса значений, сокращенные свойства и заменил элементы.

Css сворачивающееся нижнее заполнение — qaru

У меня серьезные проблемы с макетом css.Это моя рабочая база: http://jsfiddle.net/UeVm8/1/

  


    

        Название сайта
    


    

        Заголовок страницы
    
    

        Lorem ipsum dolor sit amet conct etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud упражнение ullamcorper Suscipit lobortis nisl ut aliquip ex ea Commodo Concquat.Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consquat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis.
    

        Lorem ipsum dolor sit amet conct etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud упражнение ullamcorper Suscipit lobortis nisl ut aliquip ex ea Commodo Concquat.Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consquat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis.
    


    Copyright © Название сайта, 20XX

  

  html, body {
маржа: 0;
высота: 100%;
-moz-box-sizing: рамка-рамка;
-webkit-box-sizing: border-box;
размер коробки: рамка-рамка;
padding-top: 10 пикселей;
padding-bottom: 10 пикселей;
}

#контейнер
{
положение: относительное;
маржа: 0 авто;
ширина: 600 пикселей;
фон: # 333;
минимальная высота: 100%;
высота: авто! важно;
переполнение: скрыто! важно;
}

#header
{
фон: #ccc;
отступ: 20 пикселей;
}

#header h2 {маржа: 0; }

#содержание
{
отступ: 20 пикселей;
padding-bottom: 50 пикселей;
}

# нижний колонтитул
{
позиция: абсолютная;
фон: #ccc;
внизу: 0;
padding-top: 20 пикселей;
padding-bottom: 20 пикселей;
отступ слева: 20 пикселей;
ширина: 100%;
}
  

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

Но при изменении размера окна пропадает отступ внизу!?!

Я уже пробовал разные настройки и нашел решение для Firefox: http://jsfiddle.net/UeVm8/7/

Но это решение не работает в Chrome и IE.

Меня полностью раздражает это неприятное несоответствие в реализациях CSS.

Кто-нибудь знает, как решить эту проблему для всех (современных) браузеров?

Спасибо.

PS: Это таблица стилей только для настольных компьютеров.

в CSS: что, почему и как | Автор: Джо Крик

Обратите внимание: для понимания содержания этой статьи необходимы предварительные условия. Сначала вы должны понять модель CSS Box и селекторы CSS. Если вы их получите, продолжайте.

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

А теперь давайте поговорим о том, что это за «коллапс». Сказать, что поля могут уменьшиться, — это немного вводит в заблуждение. Точнее сказать, что они сражаются, как горцы: когда сталкиваются двое, выживает только один. Другими словами, когда два элемента находятся рядом друг с другом на странице (вверху / внизу), один из элементов может потерять вертикальное поле .Ох… И, как и в большинстве драк, побеждает самый большой парень.

Давайте посмотрим на визуальный пример (измененная графика любезно предоставлена ​​Ире Адеринокун).

Элемент A имеет нижнее поле 10 пикселей. Элемент B имеет верхнее поле 30 пикселей. 30 пикселей — это большее поле, поэтому результирующее поле между двумя элементами составляет 30 пикселей. ( Примечание : если бы поля элемента A и элемента B были одинаковыми, скажем, 30 пикселей каждое, результирующее поле было бы 30 пикселей).

Вы можете спросить себя: что это за безумие? Почему вообще должна падать рентабельность? Разве не было бы проще, если бы они этого не сделали? Наверное.Однако согласитесь с этим или нет, но за всей этой странностью скрывается какая-то «причина». Все это связано с возможностью стилизовать наборов элементов на странице.

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

Рассмотрим пример.

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

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

p {
margin-top: 10px;
}

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

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

Мы не можем просто указать каждому абзацу, что у каждого абзаца есть верхнее поле 10 пикселей и нижнее поле 10 пикселей . Комбинированные поля приведут к отступу между абзацами в 20 пикселей, верно?

Введите свертывание…

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

Во-первых, вот наш CSS:

p {
margin-top: 10px;
margin-bottom: 10px;
}

Теперь вот итоговый контент со свернутыми полями:

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

Теперь, когда мы рассмотрели what и why , давайте посмотрим на как .Мои практические правила работы с Margin Collapse:

1. Поймите основные концепции и основные правила.
2. Знайте, есть исключения.
3. Если вы что-то делаете, но это не работает так, как вы думаете, вы столкнулись с исключением. Проконсультируйтесь со спецификациями.

Основные концепции

Что важно знать:

• Снижение маржи происходит только по вертикали.
• Это происходит только с элементами уровня блока — сюда не входят элементы inline-block [1].
• Это происходит только в том случае, если элементы находятся в непосредственном контакте друг с другом (они не могут быть разделены отступами, границами, строчными рамками и т. Д. Или находиться в другом контексте форматирования [1]).
• Спецификация CSS ОГРОМНА. Не пытайся знать все. Изучите высокоуровневые концепции и общие правила, ищите информацию, когда вам нужно, и расслабьтесь.

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

Ниже приведены три наиболее важных правила:

Нижнее поле элемента сворачивается вместе с верхним полем его соседнего элемента.

Верхнее или нижнее поле элемента схлопывается, когда оно касается поля его первого дочернего элемента.

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

Для этого нет графики, потому что такой элемент не займет места.

Как я уже сказал, правил больше. Если вы хотите прочитать о них более подробно, я рекомендую вам посетить сайт Джонатана.

Это все развлечения и игры, пока кто-то не пострадает

Хорошо, так что, может быть, если вы расширите логику, сокращение полей будет иметь некоторый смысл. Вроде, как бы, что-то вроде. Но, как это часто бывает с глупыми решениями, которые пытаются решить простые проблемы, решение возвращается, чтобы преследовать вас. Рассмотрим следующий код:

 // CSS 
 div {
 margin: 0; 
 отступ: 0; 
} 
 p {
 margin: 10px 0; 
} 
 // HTML 
 
 
 
 Пример текста.
 
 
 

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

Нет. Выглядит это так:

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

• Родитель имеет поле 0.
• У дочернего элемента поле 10 пикселей.
• 10 больше 0, поэтому…
• Родительский div получает поле 10 пикселей.

В этом есть смысл… Верно?

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

— — — — — — — — — — — — — —

[1] Эта сноска касается контекстов форматирования. Знаю, знаю. Я не определил, что такое контекст форматирования. Контекст форматирования — это отдельная статья. И, если вы пришли сюда из-за упоминания встроенных элементов , вы должны знать, что они создают новый контекст форматирования.Если вы хотите узнать больше о контекстах форматирования, прочтите эту статью.

Что следует знать о свертывании полей

Хорошо, значит, человек заходит в бар, спотыкается и падает на пол. Бармен спрашивает, следует ли его отрезать, и интервал отвечает: «Нет, я просто свернутое поле».

Простите, тупая шутка.

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

Когда вертикальные миры сталкиваются

Свертывание полей происходит, когда два вертикальных поля соприкасаются друг с другом. Если одно поле больше другого, то это поле перекрывает другое, оставляя одно поле.

Допустим, у нас есть элементы, уложенные друг на друга, один с нижним полем, а другой с верхним полем:

  .module {
  дисплей: блок;
  ширина: 100%;
  высота: 150 пикселей;
}

.module__top {
  нижнее поле: 25 пикселей;
  цвет фона: # f38a6d;
}

.module__bottom {
  маржа сверху: 50 пикселей;
  цвет фона: # 3bbfef;
}  

Если указанные выше модули расположены рядом друг с другом в разметке HTML, то можно ожидать, что между ними по вертикали будет 75 пикселей ( 25 пикселей из верхнего модуля плюс 50 пикселей из нижнего модуля), верно?

Что ж, в этом выпуске CSS Survival of the Fittest мы получаем только 50 из этих пикселей.Это как если бы больший край съел другой и ничего не оставил.

См. Статью «Свертывающиеся поля пера: по вертикали» от CSS-Tricks (@ css-tricks) на CodePen.

Идите и измерьте. Пространство между этими двумя модулями составляет 50 пикселей module__bottom и сдвигает границу с module__top к бордюру.

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

большее поле = общее вертикальное поле

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

50 пикселей + (-25 пикселей) = 25 пикселей

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

См. Статью «Свертывающиеся поля пера: вертикальное и отрицательное» с помощью CSS-трюков (@ css-tricks) на CodePen.

А если оба поля отрицательные? То же правило сохраняется, как если бы оба были положительными. Однако коллапсирующая маржа — это более крупный отрицательный из двух, а не тот, который ближе всего к положительному.Например, если одно поле составляет –25 пикселей, , а другое — –50 пикселей, , тогда поле будет составлять –50 пикселей, .

Другая ситуация, о которой вы можете подумать, — это когда одно вертикальное поле соответствует равному вертикальному полю. Если бы это действительно было «выживание наиболее приспособленных», тогда две сталкивающиеся равные границы должны либо жить вместе, либо вместе умереть, верно? Это хорошая мысль, но в конечном итоге происходит то, что человек продолжает привыкать, и он падает. Это похоже на то, как если бы один проглотил другой, хотя мы не уверены, какой из них проглочен.

Когда родители заземляют своих детей

Сворачивание полей также происходит, когда поле дочернего элемента пересекает поле его родительского элемента. Рассмотрим следующее:

  / * Родительский * /
div {
  маржа: 15 пикселей;
}

/ * А вот и дети * /
.красный {
  цвет фона: # ff6b6b;
}

.апельсин {
  цвет фона: # ff9e2c;
}

.желтый {
  цвет фона: # eeee78;
}

.зеленый {
  цвет фона: # 4ecd9d;
}

.синий {
  цвет фона: # 4e97cd;
}

.фиолетовый {
  цвет фона: # 6c4ecd;
}  

В этом примере div является родительским, а каждый последующий класс является вложенным дочерним элементом. Это устанавливает отношения между родителями и детьми.

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

Но, как и в случае любого родительского наказания, есть способ обойти это, добавив к родителю что-то твердое. В этом случае добавление отступа 1px позволяет использовать оба поля.

См. Статью «Свертывающиеся поля пера: сравнение родителей и детей» с помощью CSS-Tricks (@ css-tricks) на CodePen.

То же самое было бы, если бы мы добавили border-top к родительскому элементу. Пока что-то твердое находится между родительским элементом и дочерним элементом, будут использоваться оба поля.

Заключение

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

Мне интересно знать, что вы все думаете о сокращении полей. В частности, как вы управляете ими в системе, основанной на шаблонах? Гарри Робертс дает несколько хороших советов.Поделись, пожалуйста!

Все, что вам нужно знать о полях CSS — Smashing Magazine

Об авторе

Рэйчел Эндрю (Rachel Andrew) — веб-разработчик, писатель и докладчик. Она является автором ряда книг, в том числе The New CSS Layout. Она одна из тех, кто стоит за… Больше о Рэйчел ↬

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

Одна из первых вещей, которую большинство из нас узнали, изучая CSS, — это детали различных частей блока в CSS, которые называются «Модель блока CSS». Одним из элементов блочной модели является поле, прозрачная область вокруг поля, которая отталкивает другие элементы от содержимого коробки. Свойства margin-top , margin-right , margin-bottom и margin-left были описаны прямо в CSS1 вместе с сокращенным обозначением margin для одновременной установки всех четырех свойств.

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

Модель бокса CSS

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

Четыре свойства полей для каждой стороны блока и сокращение поля были определены в CSS1.

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

В настоящее время существует спецификация блочной модели уровня 3 в качестве рабочего проекта. Эта спецификация ссылается на CSS2 для определения модели бокса и полей, поэтому это определение CSS2, которое мы будем использовать в большей части этой статьи.

Свертывание полей

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

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

Поля падает в следующих ситуациях:

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

Соседние одноуровневые объекты

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

В приведенном ниже примере CodePen есть три элемента div . Первый имеет верхнее и нижнее поле 50 пикселей.У второго есть верхнее и нижнее поле 20 пикселей. У третьего есть верхнее и нижнее поле 3em. Поле между первыми двумя элементами составляет 50 пикселей, так как меньшее верхнее поле комбинируется с большим нижним полем. Поле между вторыми двумя элементами в 3em, поскольку 3em больше 20 пикселей в нижней части второго элемента.

См. Перо [Поля: соседние братья и сестры] (https://codepen.io/rachelandrew/pen/OevMPo) Рэйчел Эндрю.

Полностью пустые ящики

Если ящик пуст, его верхнее и нижнее поля могут сойтись друг с другом. В следующем примере CodePen элемент с классом empty имеет верхнее и нижнее поле 50 пикселей, однако расстояние между первым и третьим элементами составляет не 100 пикселей, а 50. Это происходит из-за сжатия двух полей. Добавление чего-либо в это поле (даже отступа) приведет к использованию верхнего и нижнего полей, а не к сворачиванию.

См. Перо [Поля: пустые поля] (https: // codepen.io / rachelandrew / pen / JQLGMr) Рэйчел Эндрю.

Родительский и первый или последний дочерний элемент

Это сценарий схлопывания полей, который чаще всего улавливает людей, так как он не кажется особенно интуитивно понятным. В следующем коде CodePen у меня есть div с классом оболочки, и я выделил этот div красным контуром , чтобы вы могли видеть, где он находится. Все три дочерних элемента имеют поле 50 пикселей.Однако первый и последний элементы находятся на одном уровне с краями обертки; между элементом и оболочкой нет поля в 50 пикселей.

См. Перо [Поля: поля для первого и последнего дочерних элементов] (https://codepen.io/rachelandrew/pen/BgrKGp) Рэйчел Эндрю.

  п {
 маржа сверху: 10 пикселей;
}

<основной>
// маржа 10px
  
 Мой первый абзац 
// маржа 10px
  
 Мой второй абзац 
// маржа 10px
  
 Мой третий абзац 
// 0 маржа


  

  п {
 маржа сверху: 10 пикселей;
 нижнее поле: 10 пикселей;
}

<основной>
// маржа 10px
  
 Мой первый абзац 
// Поле 10px (свернуто)
  
 Мой второй абзац 
// Поле 10px (свернуто)
  
 Мой третий абзац 
// маржа 10px


  

  p {
  размер шрифта: 18 пикселей;
  нижнее поле: 40 пикселей;
}

.links {
  маржа сверху: 40 пикселей;
}
  

  p {
  размер шрифта: 18 пикселей;
  нижнее поле: 100 пикселей;
}

.links {
  маржа сверху: 40 пикселей;
}
  

  .card {
  фон: # 000;
  цвет белый;
  ширина: 560 пикселей;
  маржа: 0 авто;
}

h2 {
  размер шрифта: 24 пикселя;
  маржа сверху: 100 пикселей;
}

п {
  размер шрифта: 18 пикселей;
  нижнее поле: 100 пикселей;
}

.links {
  маржа сверху: 10 пикселей;
}
  

Точно так же в приведенном выше коде мы присвоили всем абзацам значение по нижнему краю .Это поле на элементах p.link касается нижнего поля элемента .card , что означает, что два сливаются вместе, и поле влияет на элемент .card вместо ссылок.

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

Проблема в том, что мы используем поле

Если мне нужно пространство между верхом .card и дочерние элементы внутри него, я все равно не должен использовать margin .

Новички часто путают margin и отступы . Мое общее практическое правило: если вам нужно пустое пространство, используйте поле , поле . Если вам нужно больше фона, используйте padding .

В этом случае мы хотим, чтобы наш .card имел больше фона, поэтому мы не должны добавлять поле к его дочерним элементам. Вместо этого мы должны добавить padding к самому элементу.

На изображении выше мы видим отступы и поля.

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

s и

Поля не всегда сжимаются.

Есть некоторые исключения для сужения полей. Прямые потомки родительских элементов grid и flex не имеют сворачивающихся полей.

Подсказка?.

Но есть и обходной путь, который возвращает нас к тем таблицам стилей пользовательских агентов, о которых мы говорили в начале.

Есть простой способ даже не думать о сворачивании полей

Во-первых, есть мое общее практическое правило, о котором я говорил выше:

• Если вам нужно пустое пространство, используйте поле
• Если вам нужно Для получения дополнительной информации используйте заполнение

Это позволит вам избежать проблем в большинстве случаев.Но давайте добавим к этому дополнительное правило, которое поможет еще больше:

• Старайтесь избегать margin-top , кроме случаев, когда вам действительно нужен

Это правило немного конфликтует с пользовательским агентом — стилей, которые устанавливают margin-top и margin-bottom для группы элементов, что является одной из причин, по которой я часто делаю что-то вроде этого:

  h2,
h3,
h4,
h5,
h5,
h6,
п,
ул,
ol {
 маржа: 0 0 1em 0;
}  

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

(Примечание: если вы просмотрите код здесь, на freeCodeCamp, вы увидите, что они тоже делают нечто подобное!)

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

Эти уроки — всего лишь отрывок из моего гораздо более обширного курса по адаптивному веб-дизайну.Чтобы продолжить это путешествие по программированию, ознакомьтесь с курсом.

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

Удачного кодирования 🙂