Схлопывающиеся отступы
Начало формы
Конец формы
При рассмотрении блочной модели была затронута тема схлопывания отступов. Этот эффект наблюдается, когда у блочных элементов расположенных рядом друг с другом по вертикали, отступы не суммируются, а объединяются между собой. Само схлопывание действует на два и более блока (один может быть вложен внутрь другого) с отступами сверху или снизу, при этом примыкающие отступы комбинируются в один. Этот эффект работает только для блоков, у которых не заданы поля и границы. Для отступов слева и справа схлопывание никогда не применяется.
Несмотря на загадочность, схлопывание несёт в себе сугубо практическое значение и в первую очередь предназначено для корректного отображения текста. Расстояние между абзацами (тег <p>) без схлопывания увеличится в два раза, тогда как верхний отступ первого абзаца и нижний отступ последнего абзаца останутся неизменными. Схлопывание гарантирует, что расстояние в абзацах везде будет одинаковым.
Правила вычисления единого отступа меняются в зависимости от ряда условий, так, есть разница между положительным и отрицательным значением отступа, родительским и дочерним элементом. Далее перечислим типовые примеры.
Оба отступа положительны
Для положительных значений отступов выбирается наибольшее значение из двух отступов, и оно устанавливается как расстояние между блоками. На рис. 3.13 пунктирной линией выделены отступы у блоков и показано как в этом случае блоки устанавливаются относительно друг друга.
Рис. 3.13. Разные отступы у блоков
При одинаковых значениях отступов за расстояние между блоками принимается одно из них.
В следующем стиле у тега <h1> нижний отступ задаётся как 20 пикселов, а у <p> верхний отступ как 5 пикселов.
H1 {
background: #F0BA7D;
margin-bottom: 20px;
}
P {
background: #CADADD;
margin: 5px 0;
}
Значения отступов сравниваются между собой, и остаётся наибольшее число, расстояние между заголовком и абзацем текста принимается равным 20 пикселов (рис. 3.14).
Рис. 3.14. Положительные отступы
Один из отступов отрицательный
В этом случае происходит складывание отступов по правилам математики:
x + (-y) = x – y
Здесь x и y величина прилегающих отступов элементов.
В следующем стиле у тега <h1> нижний отступ задаётся как 20 пикселов, а у <p> верхний отступ с отрицательным значением 10 пикселов.
H1 {
background: #F0BA7D;
margin-bottom: 20px;
}
P {
background: #CADADD;
margin: -10px 0 5px;
}
Из значения нижнего отступа тега <h1> отнимается значение верхнего отступа <p>, в итоге расстояние между заголовком и абзацем текста будет равно 10 пикселов (рис. 3.15).
Рис. 3.15. Один отступ отрицательный
Если полученное значение в результате суммирования окажется отрицательным, то оно будет действовать на нижний блок, соответственно, он сдвинется вверх на указанное значение.
Оба отступа отрицательны
Из двух значений выбирается наибольшее по модулю, оно же и выступает в качестве отрицательного отступа между элементами. Так, если отступы равны -10px и -20px, то итоговое значение будет -20px.
В следующем стиле у тега <h1> нижний отступ задаётся как 1em, а у <p> верхний отступ с отрицательным значением 10 пикселов.
H1 {
background: #F0BA7D;
margin-bottom: -1em;
}
P {
background: #CADADD;
margin: -10px 0 5px;
}
При использовании разных единиц в отступах, браузер приводит их к одним единицам и сравнивает между собой. В данном случае 1em больше, чем 10px, поэтому текстовый абзац сдвинется вверх на 1em (рис. 3.16).
Рис. 3.16. Отрицательные отступы