Содержание

Устранение схлопывания 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+

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

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

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

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

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

Средний

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

Схлопывание отступов (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)

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

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

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

Средний

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

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

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

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

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

 

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

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

Отступы:

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

Поля:

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

 

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

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

Те же правила касаются и свойства 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. В нем есть много вещей, о которых не знаешь, пока не столкнешься с ними нос к носу.

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

В интернете очень много запросов подобных следующим:

  • как удалить вертикальный отступ между дивами
  • как убрать горизонтальный отступ между дивами
  • как исправить схлопывание маргинов css
  • почему маргины внутренних элементов не работают
  • почему нижний/левый/правый маргин не работает

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

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

text-align: center не работает

Мы постоянно используем text-align: center для центрирования текста. Но это правило также может быть использовано для выравнивания элементов внутри родительского контейнера.

У новичков это часто не получается: текст внутри блока центрируется, а сам блок – нет. Почему? Потому что элемент, который вы пытаетесь выровнять является блочным.

По умолчанию он занимает 100% ширины родителя, поэтому его невозможно выровнять по центру. Чтобы решить проблему, ему следует установить строчно-блочный тип отображения.

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

Есть вот такая разметка:

<div>
  <div>
    <h4>Some Content</h4>
  </div>
</div>

и вот такие стили:

body{
  background: #ccc;
}
#container{
  background: white;
  width: 500px;
  height: 500px;
  text-align: center;  /* отцентрируется только контент */
}
#box{
  color: white;
  background: #333;
  width: 250px;
  height: 250px;
}

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

Текст выровнялся по центру, но сам элемент – нет. Теперь вы знаете, что это происходит из-за того, что он имеет блочный тип отображения. Чтобы сработало свойство text-align: center, он должен быть строчным или строчно-блочным.

Добавим всего одну строчку в файл стилей:

#box{
  display: inline-block; 
  color: white;
  background: #333;
  width: 250px;
  height: 250px;
}

Теперь все правильно:

И это совсем не магия, ведь вы знаете, как все работает 😉

Расстояние между инлайн-блочными элементами

С этой проблемой сталкивался каждый CSS-новичок.

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

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

В этом моменте начинаются истерики и появляются костыли с волшебными цифрами вроде width: 49.76%.

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

<div>
  <div></div>
  <div></div>
</div>

Добавляем стили:

body{
  background: #ccc;
}
#container{
  background: white;
  width: 500px;
}
#first,#second{
  display: inline-block;
  color: white;
  background: #333;
  width: 50%;
  height: 250px;
}

и получаем вот это:

Есть 2 распространенных способа решения этой проблемы.

  1. использовать комментарии;
  2. удалить пространство между тегами в HTML-файле.
<!-- использование комментария -->

<div>
   <div></div><!--
--><div></div>
</div>

<!-- удаление промежутка между тегами -->
<div>
   <div></div><div></div>
</div>

Теперь все нормально:

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

«Съезжание» строчно-блочных элементов

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

Для примера возьмем вот такую разметку:

<div>
  <h4>Some content</h4>
</div>
<div></div>

и вот такие стили:

body{
  background: #ccc;
}
#first,#second{
  display: inline-block;
  color: white;
  background: #333;
  width: 250px;
  height: 250px;
}

Вот результат:

Макет сломался из-за того, что вершина первого элемента сползла к низу второго – это проблема выравнивания. Решить ее очень легко, есть целых два пути:

  1. overflow: hidden;
  2. vertical-align: middle (или top, или bottom, если вы понимаете, как это работает).

overflow: hidden

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

body{
  background: #ccc;
}
#first,#second{
  display: inline-block;
  color: white;
  background: #333;
  width: 250px;
  height: 250px;
  overflow: hidden; 
}

vertical-align: middle

В этом решении вместо overflow используется vertical-align. Тип выравнивания может быть любым: top, middle, bottom.

Если использовать top для элементов с разной высотой, то результат будет следующий:

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

Если вы не понимаете, как работает вертикальное выравнивание, просто используйте вместо него overflow: hidden.

А мы попробуем выровнять блоки в примере:

body{
  background: #ccc;
}
#first,#second{
  display: inline-block;
  color: white;
  background: #333;
  width: 250px;
  height: 250px;
  vertical-align: middle;
}

Получилось:

Плавающие элементы не имеют высоты?

Это одна из самых раздражающих проблем CSS.

Допустим, у вас есть 2 заголовка, вы устанавливаете одному float: left, и внезапно второй прилипает к верху сайта перед ним, как будто в разметке он идет первым.

<h3>Left Text</h3>
<h3>Right Text</h3>
body{
  background: #ccc;
}
#left{
 float: left;
}

Или например, вы устанавливаете float обоим заголовкам, одному – влево, а другому &ndahs; вправо. Тогда элемент, идущий после них, поднимется вверху.

<h3>Left Text</h3>
<h3>Right Text</h3>
<img src="https://bit.ly/2LsgNeT">
body{
  background: #ccc;
}
#left{
 float: left;
}
#right{
  float: right;
}
img{
  width: 50%;
}

Существует 3 возможных решения для этой проблемы:

  • overflow: hidden;
  • display: inline-block.

oveflow: hidden

Нужно обернуть плавающие элементы в родительский контейнер и уже для него установить overflow: hidden.

<div>
  <h3>Left Text</h3>
  <h3>Right Text</h3>
</div>
body{
  background: #ccc;
}
#wrapper{
  overflow: hidden;
}
#left{
 float: left;
}

display: inline-block

Решение похоже на предыдущее, только вместо overflow: hidden родительскому элементу добавляется display: inline-block.

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

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

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

Сложно, непонятно и сбивает с толку? Да, есть немного. На самом деле, вам не следует использовать это решение, так как оно совершенно немасштабируемо. Если размеры блоков могут меняться (например, при увеличении шрифта), оно не подходит.

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

Не забудьте использовать вертикальное выравнивание.

<div>
  <h3>Left Text</h3>
  <h3>Right Text</h3>
</div>
<img src="https://bit.ly/2LsgNeT">

Стили с вертикальным выравниванием:

body{
  background: #ccc;
}
#wrapper{
  background: white;
  display: inline-block;
  vertical-align: top;       
}
#left{
 float: left;
}
#right{
  float: right;
}
img{
  width: 50%;
}

А этот пример без выравнивания:

Margin-top не работает?

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

Эта проблема известна как схлопывание полей.

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

<div>
  <div></div>
</div>
body{
  background: #ccc;
}
#container{
  background: white;
  width: 500px;
  height: 500px;
}
#box{
  background: #333;
  width: 250px;
  height: 250px;
  margin-top: 100px;    /* добавляем margin-top */
}

Есть целых 6 решений этой проблемы (но не все из них хороши).

  • display: inline-block для дочернего элемента;
  • display: inline-block для родительского элемента;
  • overflow: hidden для родительского элемента;
  • position: absolute для родительского элемента;
  • установка прозрачной рамки для родителя;
  • установка верхнего паддинга для родителя (можно использовать очень маленькие значения, десятые доли пикселя).

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

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

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

После применения любого из этих способов результат будет такой:

Вот с такими проблемами часто сталкиваются начинающие веб-разработчики. Надеюсь, статья была полезной.

%d1%81%d1%85%d0%bb%d0%be%d0%bf%d1%8b%d0%b2%d0%b0%d0%bd%d0%b8%d0%b5 — с русского на все языки

Все языкиРусскийАнглийскийИспанский────────Айнский языкАканАлбанскийАлтайскийАрабскийАрагонскийАрмянскийАрумынскийАстурийскийАфрикаансБагобоБаскскийБашкирскийБелорусскийБолгарскийБурятскийВаллийскийВарайскийВенгерскийВепсскийВерхнелужицкийВьетнамскийГаитянскийГреческийГрузинскийГуараниГэльскийДатскийДолганскийДревнерусский языкИвритИдишИнгушскийИндонезийскийИнупиакИрландскийИсландскийИтальянскийЙорубаКазахскийКарачаевскийКаталанскийКвеньяКечуаКиргизскийКитайскийКлингонскийКомиКомиКорейскийКриКрымскотатарскийКумыкскийКурдскийКхмерскийЛатинскийЛатышскийЛингалаЛитовскийЛюксембургскийМайяМакедонскийМалайскийМаньчжурскийМаориМарийскийМикенскийМокшанскийМонгольскийНауатльНемецкийНидерландскийНогайскийНорвежскийОрокскийОсетинскийОсманскийПалиПапьяментоПенджабскийПерсидскийПольскийПортугальскийРумынский, МолдавскийСанскритСеверносаамскийСербскийСефардскийСилезскийСловацкийСловенскийСуахилиТагальскийТаджикскийТайскийТатарскийТвиТибетскийТофаларскийТувинскийТурецкийТуркменскийУдмуртскийУзбекскийУйгурскийУкраинскийУрдуУрумскийФарерскийФинскийФранцузскийХиндиХорватскийЦерковнославянский (Старославянский)ЧеркесскийЧерокиЧеченскийЧешскийЧувашскийШайенскогоШведскийШорскийШумерскийЭвенкийскийЭльзасскийЭрзянскийЭсперантоЭстонскийЮпийскийЯкутскийЯпонский

 

Все языкиРусскийАнглийскийИспанский────────АлтайскийАрабскийАрмянскийБаскскийБашкирскийБелорусскийВенгерскийВепсскийВодскийГреческийДатскийИвритИдишИжорскийИнгушскийИндонезийскийИсландскийИтальянскийКазахскийКарачаевскийКитайскийКорейскийКрымскотатарскийКумыкскийЛатинскийЛатышскийЛитовскийМарийскийМокшанскийМонгольскийНемецкийНидерландскийНорвежскийОсетинскийПерсидскийПольскийПортугальскийСловацкийСловенскийСуахилиТаджикскийТайскийТатарскийТурецкийТуркменскийУдмуртскийУзбекскийУйгурскийУкраинскийУрумскийФинскийФранцузскийЦерковнославянский (Старославянский)ЧеченскийЧешскийЧувашскийШведскийШорскийЭвенкийскийЭрзянскийЭсперантоЭстонскийЯкутскийЯпонский

n1 — by n1k1t0ss

Схлопывания и выпадения

Схлопывание margin: Вертикальный отступ между двумя соседними элементами равен максимальному отступу между ними. Если отступ одного элемента равен 50px, а второго 30px, то отступ между ними будет 50px

Выпадение margin: Если внутри родительского блока расположить блок и задать ему отступ сверху, то внутренний блок прижмётся к верхнему краю родительского, а у родительского элемента появится отступ сверху. То есть верхний отступ внутреннего элемента «выпадает» из родительского элемента. Будет выбран максимальный margin

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

Как отцентровать элемент?
  1. Задать width
  2. Задать margin: 0 auto
Проблема width 100%

CSS-свойство width задаёт не общую ширину блока, а только ширину содержания. Общая ширина блока затем складывается из трёх компонентов: ширины содержания, внутренних отступов и ширины рамок слева и справа. Ширина 100% заставит поля быть такой же ширины, как родительский блок, а паддинг добавит отступы. За счёт отступов поле станет шире своего контейнера.

Исправить с помощью свойства box-sizing: border-box: теперь ширина элемента включает и рамку, и внутренние отступы и, собственно, ширину содержания самого элемента.

Свойство display: inline-block

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

От строчных им достались следующие черты:

  • по ширине они ужимаются под своё содержимое;
  • могут располагаться в одну строку;
  • реагируют на вертикальное выравнивание, vertical-align;
  • реагируют на горизонтальное выравнивание, text-align, заданное у родителя.

От блочных:

  • им можно задавать размеры с помощью width и height;
  • а также внешние и внутренние отступы и рамки, которые работают во всех направлениях и увеличивают размер элемента.
Float — управление потоком

Если мы задаём элементу свойство float:left или float:right, то он прижимается к левому или правому краю, а также начинает ужиматься по ширине под своё содержимое. С той стороны, которая не прижата к краю родителя, появляется свободное место. Это место может быть занято другими элементами. Зафлоаченному элементу можно явно задавать размеры и отступы.

Зафлоаченные элементы выпадают из потока, но лишь частично:

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

Такое поведение флоатов даёт интересные эффекты:

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

Flex

  • Блоки легко становятся гибкими, элементы могут сжиматься и растягиваться, заполняя пространство.
  • Нет никаких проблем с тем чтобы выровнять элементы по вертикали и горизонтали.
  • Неважно, в каком порядке расположены HTML-элементы. Вы можете изменить их порядок через CSS.
  • Идеально выровнить элемент(ы) по центру обоих осей используя лишь margin: auto
  • По-умолчанию можно создать блоки одинаковой высоты, что невозможно сделать в блочной модели
  • Внешние отступы не схлопываются и не выпадают
Направление

Свойство flex-direction[ default row (→↓), row-reverse (←↓), column (↓→), column-reverse (↑→)] позволяет разворачивать главную ось во всех направлениях (а поперечную вниз\влево).

Распределение

Cвойство justify-content [flex-start, flex-end, center, space-between, space-around] определяет, как будут выровнены элементы вдоль главной оси [в начале, в конце, по-центру, равномерно (прижавшись к краям), равномерно (и 50% удалены от краев) ]

Свойство align-items[ default stretchflex-start, flex-end, center, baseline ] определяет то, как будут выровнены элементы вдоль поперечной оси [ элементы растягиваются на всю «высоту» флекс-контейнера, в начале, в конце, по-центру, выравниваются по базовой линии текста внутри них]

Свойство align-self [ default stretchflex-start, flex-end, center, baseline ] задает поперечное выравнивание отдельному элементу для самих флекс-элементов, а не для флекс-контейнера.

Перенос

 Свойствоflex-wrap [default  nowrap, wrap, wrap-reverse ] позволяет переносить элементы на следующий ряд. По-умолчанию элементы не переносятся и будут сжиматься до минимально возможной ширины (указание ширины это не исправит). Если перестанут помещаться в контейнер и после уменьшения, то выйдут за его пределы, но продолжат располагаться в один ряд

Выравнивание Рядов

Свойство align-content [defaultstretch, flex-startflex-endcenter, space-betweenspace-around ]управляет выравниванием рядов флекс-элементов вдоль поперечной оси. Он действует на всю структуру контейнера (в отличии от align-items, который выравнивает элементы по своему ряду)

stretch растягивает ряды флекс-элементов, при этом оставшееся свободное место между ними делится поровну. Отображение строк при при этом зависит от значения align-items:

  1. Если у align-items задано значение stretch, то элементы в строках растягиваются на всю высоту своей строки.
  2. Если значение отлично от stretch, то элементы в строках ужимаются под своё содержимое и выравниваются в строках в зависимости от значения align-items.

Играем с Flex

Поля ввода с динамической шириной

Решить эту задачу можно только при помощи флексбокса. Превратим контейнер поля ввода во флекс-контейнер, все элементы внутри него превратятся во флекс-элементы, базовый размер которых будет зависеть от их содержания — flex-basis: auto;. И останется только задать ненулевой коэффициент растягивания полям ввода.

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

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

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

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

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

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

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

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

Отступы:

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

Поля:

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

Существует несколько способов задания этих стилей. Например, непосредственно указать размер всех полей или отступов одним аргументом в какой-нибудь единице измерения (px, ex, em, pt, cm и так далее):

padding : 3px ; margin : 3px ;

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

padding : 3px 5px ; margin : 3px 5px ;

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

padding : 3px 5px 2px ; margin : 3px 5px 2px ;

первый — поле/отступ сверху, второй — одновременно слева и справа, третий — снизу. При четырех аргументах:

padding : 3px 5px 2px 6px ; margin : 3px 5px 2px 6px ;

первый — поле/отступ сверху, второй — справа, третий — снизу, четвертый — слева. Легко запомнить: первый — сверху, далее по часовой стрелке. Кроме того, можно задавать поля и отступы для конкретного края отдельно, с помощью соответствующих стилей: padding-top , padding-right , padding-bottom , padding-left , margin-top , margin-right , margin-bottom , margin-left . Значением этих стилей может быть только один аргумент, задающий величину поля/отступа для данной стороны.

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

padding : 5px ;

В результате страница изменит вид к следующему:

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

margin-top : 5px ;

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

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

HTML-код подопытной страницы:

html > head > title > Тест/ title > meta http-equiv = «Content-Type» content = «text/html;charset=utf-8» > / head > body > style > table {width: 200px; height: 150px; border: 1px solid #555; border-collapse: collapse} td {vertical-align: top; padding: 0px} div {width: 100px; height: 100px; background: red} / style > table style = «background: lime» > tr > td style = «padding: 5px» > div style = «margin: 0px» > / div > / td > / tr > / table > table style = «background: skyblue; margin-top: 5px» > tr > td > / td > / tr > / table > / body > / html > Padding-top

Со структурой блока, надеюсь, Вы уже знакомы. Если нет, то она представлена ниже.

Структура блока

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

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

Итак. Поля задаются свойством padding . Это внутренние расстояния от границ блока до его содержимого.

Свойство применимо ко всем элементам.

Расстояние задается в единицах длины, принятых в CSS , в % , либо (по умолчанию

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

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

Свойство margin также применимо ко всем элементам.

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

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

И еще : отступы (margin ) располагаются за пределами блока, в то время как поля (padding ) внутри его, поэтому фон блока или его фоновое изображение распространяются только на поля, а отступы всегда прозрачны, либо имеют фон основного (родительского ) блока или фон страницы.

Фрагмент кода:



; «>

Таблица располагается внутри контейнера с красной границей и синим фоном.

Ширина отступов от границы таблицы до красной границы контейнера составляет 10 пикселей.

В ячейке слева расположено изображение. Отступы от изображения до границ ячейки составляют 25 пикселей.

Поля правой ячейки составляют 10 пикселей!


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

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

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

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

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

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

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

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

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

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

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

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

Текстовые поля в HTML5

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

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

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

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

Текстовые поля в HTML5 35000

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

Поле поиска

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

Поиск в HTML5

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

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

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

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

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

Близкие братья и сестры

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

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

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

Пустые блоки

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

На что обратить внимание:

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

HTML

  

Нижнее поле этого абзаца свернуто…

… с верхним полем этого абзаца, давая между ними поле 1,2rem.

Этот родительский элемент содержит два абзаца!

Этот абзац имеет отступ .4rem между ним и текстом выше.

Мое нижнее поле сворачивается с моим родителем, в результате чего нижнее поле составляет 2rem.

Я 2rem ниже элемента выше.

CSS

  раздел {
  поле: 2re 0;
  фон: лаванда;
}

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

Результат

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

Учебное пособие по CSS => Свертывание полей

Пример

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

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

Рассмотрим следующие стили и разметку:

  раздел {
    поле: 10 пикселей;
}
  
  <дел>
    некоторый контент
<дел> еще немного контента

Они будут находиться на расстоянии 10 пикселей друг от друга, так как вертикальные поля схлопываются поверх одного и другого.(Интервал не будет суммой двух полей.)

Пример смежных горизонтальных полей:

Рассмотрим следующие стили и разметку:

  диапазон{
    поле: 10 пикселей;
}
  
  некоторыйконтент
  

Они будут находиться на расстоянии 20 пикселей друг от друга, так как горизонтальные поля не схлопываются поверх одного и другого. (Интервал будет равен сумме двух полей.)

Перекрытия разных размеров

  .верхняя{
    поле: 10 пикселей;
}
.низ{
    поле: 15 пикселей;
}
  
  <дел>
    некоторый контент