Схлопывание вертикальных отступов – Внутренние отступы, свойство padding — Блочная модель документа — HTML Academy

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

От автора: схлопывание отступов 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

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

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

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

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

Узнать подробнее

PSD to HTML

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

Смотреть

Схлопывание отступов (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. У блока установлен отличающийся от стандартного контекст форматирования.

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

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

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

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

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

Средний

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

Обходим схлопывание margin — Xiper.net

Автор: Татьяна Шкабко, Александр Головко Дата публикации: 23.11.2010

В некоторых случаях вертикальные внешние отступы (margin-top и margin-bottom) смежных элементов или родителя и первого/последнего потомка могут схлопываться. Подробнее об этом читай в статье Схлопывание margin.

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

Задача

«Отучить» margin схлопываться.

Решения

Вариантов решения много. У каждого есть своя область применения, свои особенности и, к сожалению, свои недостатки.

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

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

Недостаток

• Такой подход очень негибкий. Для первого или последнего элемента отступ придется определять дополнительно, возможно с использованием псевдокласcов :first-child или :last-child, которые поддерживаются не всеми браузерами (:first-child не понимает IE6, а :last-child не понимает ни IE6, ни IE7).

Смотрим Демо-пример.

• IE 6-8
• Firefox 3.0
• Opera 9.5-10.5
• Safari 4
• Chrome 7

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

1. Для родительского элемента с нужной стороны задаем однопиксельный padding или однопиксельный прозрачный border (для IE6 задаем границу фоновым цветом элемента). Учти, что высота элемента при этом увеличивается на 1px!

   Недостатки

2. Для родителя задаем overflow со значением отличным от visible.

   Недостатки

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

Смотрим Демо-пример.

• IE 6-8
• Firefox 3.0
• Opera 9.5-10.5
• Safari 4
• Chrome 7

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

1. Вместо одного или обоих вертикальных margin ставим границы (border) аналогичного размера. Цвет границ должен совпадать с цветом фона родителя для создания эффекта прозрачного пространства.

   Недостатки

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

2. Вместо одного или обоих вертикальных margin ставим внутренние отступы элемента padding.

   Недостатки

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

3. Позиционируем элемент абсолютно (position:absolute;).

   Недостаток

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

4. Делаем элемент плавающим (float).

   Недостаток

   • Как и в предыдущем случае, плавающий элемент выпадет из потока, что может доставить лишние хлопоты с позиционированием последующих элементов.
5. Update 24.10.2010 by SelenIT. Задаем для элемента, участвующего в схлопывании, свойство display:inline-block/table/inline-table/table-cell.

Смотрим Демо-пример.

• IE 6-8
• Firefox 3.0
• Opera 9.5-10.5
• Safari 4
• Chrome 7

Выводы

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

Материалы:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

6.0+	7.0+	9.5+	4.0+	3.0+	—	—

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

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

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

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

Средний

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

Разбираем Margin Collapsing — AlexdevAlexdev

Добрый день, уважаемые читатели!

Понимание, как происходит collapsing (схлопывание) margin-ов в CSS, может сделать жизнь web-разработчику намного легче. Давайте посмотрим, как работает схлопывание margin-ов в CSS.

 

Горизонтальный и вертикальный Margin Collapsing

Горизонтальные margin-ы никогда не схлопываются. А вот с вертикальными все не так просто.

Для понимания, как вертикальные margin-ы схлопываются, создадим такой простой пример.

 

HTML

<div>
    <div>
        <p>Red</p>
    </div>
    <div>
        <p>Blue</p>
    </div>
</div>

CSS

#parent{
    background-color:yellow; 
    width:300px;
}
#red {
    background-color:red; 
    height:50px; 
}
#blue {
    background-color:blue; 
    height:50px; 
}

 

Результат в браузере

 

Положительные отступы между смежными элементами

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

CSS

#parent{ 
    background-color:yellow; 
    width:300px; 
}
#red {
    background-color:red; 
    height:50px; 
    margin-bottom:30px;
}
#blue {
    background-color:blue; 
    height:50px; 
    margin-top:20px;
}

 

Результат в браузере

 

Смежные элементы с положительным и отрицательным отступами

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

CSS

#parent{ 
    background-color:yellow; 
    width:300px; 
}
#red {
    background-color:red; 
    height:50px; 
    margin-bottom:30px;
}
#blue {
    background-color:blue; 
    height:50px;
    margin-top:-20px;
}

 

Результат в браузере

Если сумма отступов будет отрицательной, то последний элемент будет перекрывать первый. Посмотрим это на примере ниже.

CSS

#parent{ 
    background-color:yellow; 
    width:300px; 
}
#red {
    background-color:red; 
    height:50px; 
    margin-bottom:30px;
}
#blue {
    background-color:blue; 
    height:50px;
    margin-top:-40px;
}

 

Результат в браузере

 

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

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

 

CSS

#parent{ 
    background-color:yellow; 
    width:300px; 
}
#red {
    background-color:red; 
    height:50px; 
}
#blue {
    background-color:blue; 
    height:50px; 
    margin-top:30px;
}
#blue p{ 
    margin-top:20px; 
    background:green;
}

 

Результат в браузере

 

Как убрать margin collapsing родительского и дочернего элемента

Чтобы убрать схлопывание, нужно задать для родительского элемента border или padding.

 

CSS

#parent{ 
    background-color:yellow; 
    width:300px;
}
#red {
    background-color:red; 
    height:50px; 
}
#blue {
    background-color:blue; 
    height:50px; 
    margin-top:30px; 
    border:1px solid black;
}
#blue p{ 
    margin-top:20px; 
    background:green;
}

 

Результат в браузере

 

 

На этом все.

Подписывайтесь на рассылку 😉

 

 

Автор статьи: Alex. Категория: CSS
Дата публикации: 11.07.2014

Продвинутые вертикальные отступы CSS — margin’ы

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

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

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

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

Шаг 1

Простая статья выглядит следующим образом:

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

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

Узнать подробнее

<article> <h2>Hello World</h2> <p>Lorem ipsum dolor sit amet</p> <p>Lorem ipsum dolor sit amet</p> <img src=»…» alt=»…»> <p>Lorem ipsum dolor sit amet</p> <ul> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> </ul> </article>

<article>   <h2>Hello World</h2>   <p>Lorem ipsum dolor sit amet</p>   <p>Lorem ipsum dolor sit amet</p>   <img src=»…» alt=»…»>   <p>Lorem ipsum dolor sit amet</p>   <ul>     <li>Lorem</li>     <li>Ipsum</li>     <li>Dolor</li>   </ul> </article>

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

.article > * + * { margin-top: 1.5rem; }

.article > * + * {     margin-top: 1.5rem; }

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

В CodePen демо ниже показан пример:

Шаг 2

На втором этапе я добавляю больше определенных правил, например:

.article > img + * { margin-top: 3rem; }

.article > img + * {     margin-top: 3rem; }

Все элементы после img получают margin-top. Принцип схож с применением margin-bottom к img напрямую. Однако у смежного селектора и margin-top есть два преимущества: не нужно удалять margin-bottom с :last-child и избегать схлопывания margin’ов.

В CodePen ниже показан расширенный пример:

Шаг 3

На этом этапе я добавляют правила к определенным элементам, например:

.article > * + h3 { margin-top: 4rem; } .article > * + img { margin-top: 3rem; }

.article > * + h3 {     margin-top: 4rem; } .article > * + img {     margin-top: 3rem; }

Если у h3 есть смежный тег, он получит margin-top. То же самое будет с изображением.

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

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

Узнать подробнее

Пример CodePen:

Шаг 4

На последнем этапе я работаю с определенными зависимостями:

.article > img + img { margin-top: 1rem; }

.article > img + img {     margin-top: 1rem; }

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

Пример CodePen:

Если хочется, можно сделать еще более специфичный код. Например:

.article > img + img + img + h3 { margin-top: 5rem; }

.article > img + img + img + h3 {     margin-top: 5rem; }

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

Продвинутое использование

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

.article { > * + * { margin-top: 1.5rem } > h3 + * { margin-top: 1rem } > img + * { margin-top: 3rem } > * + h3 { margin-top: 4rem } > * + h4 { margin-top: 3.5rem } > * + img { margin-top: 3rem } > img + img { margin-top: 1rem } > h3 + h4 { margin-top: 4.5rem } }

.article {     > * + * { margin-top: 1.5rem }     > h3 + * { margin-top: 1rem }     > img + * { margin-top: 3rem }     > * + h3 { margin-top: 4rem }     > * + h4 { margin-top: 3.5rem }     > * + img { margin-top: 3rem }     > img + img { margin-top: 1rem }     > h3 + h4 { margin-top: 4.5rem } }

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

CodePen пример на CSS-переменных:

Заключение

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

Смежный селектор и margin-top позволяют мне решать сложные требования к дизайну, сохраняя читаемость CSS-правил. Особенно если мне позже понадобится добавить или изменить правила.

Автор: Sebastian Eberlein

Источник: https://hackernoon.com/

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

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

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

Узнать подробнее

PSD to HTML

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

Смотреть

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

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

Синтаксис свойства

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

• margin-left;
• margin-right;
• margin-top;
• margin-bottom.

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

parent {
  width: 500px;
  height: 100px;
}
child {
  margin-left: 10%; // 500px * 10% = 50px
  margin-top: 10%; // 500px * 10% = 50px
}

В CSS margin может быть отрицательным.

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

• Один: для всех сторон сразу.
• Два: для верха и низа и отдельно для боковых сторон.
• Три: для верха, боков и низа.
• Четыре: перечисление сторон по часовой стрелке, начиная с верхней.

element {
 margin: 20px;
}

element {
 margin: 20px 30px;
}

element {
 margin: 20px 30px 40px;
}

element {
 margin: 20px 30px 40px 50px;
}

Алгоритмы вычисления отступов

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

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

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

Схлопывание маргинов

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

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

Вынос маргина за пределы родителя

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

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

Если родитель имеет рамку, паддинг или свойство overflow, равное hidden или scroll, вынос маргина не происходит.

Выравнивание по центру

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

element {
 width: 400px;
 margin: 0 auto;
}

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