что такое схлопывание padding
Схлопывающиеся отступы
При рассмотрении блочной модели была затронута тема схлопывания отступов. Этот эффект наблюдается, когда у блочных элементов расположенных рядом друг с другом по вертикали, отступы не суммируются, а объединяются между собой. Само схлопывание действует на два и более блока (один может быть вложен внутрь другого) с отступами сверху или снизу, при этом примыкающие отступы комбинируются в один. Этот эффект работает только для блоков, у которых не заданы поля и границы. Для отступов слева и справа схлопывание никогда не применяется.
Несмотря на загадочность, схлопывание несёт в себе сугубо практическое значение и в первую очередь предназначено для корректного отображения текста. Расстояние между абзацами (тег
) без схлопывания увеличится в два раза, тогда как верхний отступ первого абзаца и нижний отступ последнего абзаца останутся неизменными. Схлопывание гарантирует, что расстояние в абзацах везде будет одинаковым.
Правила вычисления единого отступа меняются в зависимости от ряда условий, так, есть разница между положительным и отрицательным значением отступа, родительским и дочерним элементом. Далее перечислим типовые примеры.
Оба отступа положительны
Для положительных значений отступов выбирается наибольшее значение из двух отступов, и оно устанавливается как расстояние между блоками. На рис. 3.13 пунктирной линией выделены отступы у блоков и показано как в этом случае блоки устанавливаются относительно друг друга.
Рис. 3.13. Разные отступы у блоков
При одинаковых значениях отступов за расстояние между блоками принимается одно из них.
В следующем стиле у тега
нижний отступ задаётся как 20 пикселов, а у
верхний отступ как 5 пикселов.
Значения отступов сравниваются между собой, и остаётся наибольшее число, расстояние между заголовком и абзацем текста принимается равным 20 пикселов (рис. 3.14).
Рис. 3.14. Положительные отступы
Один из отступов отрицательный
В этом случае происходит складывание отступов по правилам математики:
Здесь x и y величина прилегающих отступов элементов.
В следующем стиле у тега
нижний отступ задаётся как 20 пикселов, а у
верхний отступ с отрицательным значением 10 пикселов.
Из значения нижнего отступа тега
отнимается значение верхнего отступа
, в итоге расстояние между заголовком и абзацем текста будет равно 10 пикселов (рис. 3.15).
Рис. 3.15. Один отступ отрицательный
Если полученное значение в результате суммирования окажется отрицательным, то оно будет действовать на нижний блок, соответственно, он сдвинется вверх на указанное значение.
Оба отступа отрицательны
В следующем стиле у тега
верхний отступ с отрицательным значением 10 пикселов.
Рис. 3.16. Отрицательные отступы
Вложенные элементы
Предположим, что в нижнем блоке располагается дочерний элемент, у которого задан верхний отступ. Из блочной модели следует, что такой отступ сдвигает дочерний элемент вниз относительно верхнего края родителя. Однако с учётом схлопывающихся отступов результат будет иным. Отступ словно выйдет за пределы блока и будет задавать расстояние между верхним блоком и родительским элементом (рис. 3.17).
Рис. 3.17. Отступы с учётом дочернего элемента
В следующем стиле у тега
На элементы воздействует сразу три разных отступа. Чтобы сделать расчет итогового отступа в такой сложной ситуации, можно действовать последовательно. Вначале определяем отступ между
. Оба значения положительны, при этом верхний отступ у
наибольший, он и будет итоговым отступом между
Рис. 3.18. Отступы с учётом вложения тегов
Схлопывание с вложенными тегами работает и без наличия верхнего элемента. Если оставить только конструкцию
Отмена схлопывания
Схлопывание не всегда требуется при вёрстке страницы, а в некоторых случаях вообще «ломает» дизайн. Поэтому следует знать, в каких случаях схлопывание работает, а в каких нет.
Схлопывание не срабатывает:
Также схлопывание не срабатывает при соблюдении некоторых условий:
В качестве примера возьмём достаточно распространённый случай, когда нам требуется сделать два слоя, у которых задан только фоновый цвет, но нет полей и границ (пример 3.9).
Пример 3.9. Близлежащие блоки
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Хотя у слоёв не заданы отступы, между ними появится небольшой промежуток (рис. 3.19). Он возникает из-за действия отступа у дочернего элемента
, верхний отступ у которого устанавливается по умолчанию.
Рис. 3.19. Отступ между слоями
и заменить его на padding-top при необходимости. Использование свойства overflow со значением auto также даст необходимый эффект. Ниже все эти методы сведены воедино.
Поскольку отступы довольно активно применяются в вёрстке, их схлопывание может оказать принципиальное значение на вид документа. Учитывайте этот эффект при формировании блоков.
Блочная модель
Базовая компьютерная грамотность, установка базового ПО, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.)
Узнать как работает блочная модель CSS, из чего она состоит и как переключиться на альтернативную модель.
Блочные и строчные элементы
В CSS мы, говоря упрощённо, имеем два типа элементов — блочные и строчные. Эти характеристики относятся к поведению блоков в контексте потока страницы и относительно других блоков на странице.
Если элемент определён как блочный, то он будет вести себя следующим образом:
Если не изменить намеренно тип отображения на строчный, то такие элементы, как заголовки (например,
, все используют block как свой внешний тип отображения по умолчанию.
Если элемент имеет тип отображения inline (строчный), то:
Экскурс: внутренний и внешний типы отображения
Здесь следует объяснить, что такое внутренние и внешние типы отображения. Как уже говорилось выше, каждый блок в CSS имеет внешний тип отображения, который определяет, блочный он или строчный.
Элементы также имеют внутренний тип отображения, который определяет расположение элементов внутри них. По умолчанию элементы внутри блока располагаются в нормальном потоке: они ведут себя так же, как и любые другие блочные или строчные элементы (как описано выше).
Примечание: Чтобы узнать больше о значениях display, и о том, как работают элементы при блочном или строчном расположении, посмотрите руководство MDN Блочное и срочное расположение (en-US).
Тем не менее, блочное и строчное расположение — это поведение web-элементов по умолчанию. Как было сказано выше, это иногда называют нормальным потоком (normal flow), потому что при отсутствии какой-либо другой инструкции элементы имеют блочное или строчное расположение.
Примеры разных типов отображения
Мы можем видеть, как строчные элементы ( inline ) ведут себя в следующем примере. Элементы в первом абзаце строчные по умолчанию и поэтому не приводят к переносу строки.
В примере вы можете заменить display: inline на display: block или display: inline-flex на display: flex для переключения между этими двумя режимами отображения.
Позже в этих уроках вы встретите такое понятие как flex-раскладка; главное, что нужно запомнить сейчас, это то, что изменение значения свойства display может изменить внешний тип отображения элемента на блочный или строчный, что меняет способ его отображения относительно других элементов в раскладке страницы.
В оставшейся части урока мы сосредоточимся на внешнем типе отображения.
Что такое блочная модель CSS?
Полностью блочная модель в CSS применяется к блочным элементам, строчные элементы используют не все свойства, определённые блочной моделью. Модель определяет, как разные части элемента — поля, рамки, отступы и содержимое — работают вместе, чтобы создать объект, который вы можете увидеть на странице. Дополнительная сложность заключается в том, что существуют стандартная и альтернативная блочные модели.
Составляющие элемента
Составляя блочный элемент в CSS мы имеем:
Рисунок ниже показывает эти слои:
Стандартная блочная модель CSS
Пространство, занимаемое нашим объектом с использованием стандартной блочной модели, на самом деле будет равно 410px в ширину (350 + 25 + 25 + 5 + 5) и 210px в высоту (150 + 25 + 25 + 5 + 5), поскольку отступы и рамки добавляются к размерам поля содержимого.
Примечание: Внешний отступ не считается в фактическом размере объекта. Конечно, он влияет на общее пространство, занимаемое объектом на странице, но только на внешнюю часть. Область элемента заканчивается на рамке — она не распространяется за нее.
Альтернативная блочная модель CSS
Вы можете подумать, что довольно неудобно добавлять рамки и отступы, чтобы получить реальный размер элемента, и окажетесь правы! По этой причине, спустя некоторое время после стандартной блочной модели, в CSS была введена альтернативная блочная модель. При использовании альтернативной модели любая ширина — это ширина видимой части элемента на странице, поэтому ширина области содержимого будет равна общей ширине минус ширина рамки и внутреннего отступа. Тот же CSS, который использовался выше, даст следующий результат (ширина = 350px, высота = 150px).
Примечание: Интересный факт — Internet Explorer по умолчанию использовал альтернативную блочную модель без доступного механизма для переключения.
Играем с блочными моделями
Примечание: вы можете найти решение этой задачи здесь.
Использование инструментов разработчика в браузере для просмотра блочных моделей
Инструменты разработчика вашего браузера могут значительно облегчить понимание блочной модели. Если вы проверите элемент в инструментах разработчика Firefox, вы можете увидеть его размер, а также внешний и внутренний отступы и рамку. Проверка элемента таким способом — отличный способ выяснить, действительно ли размер вашего блока такой, какой вы думаете!
Внешние, внутренние отступы и рамки
Давайте рассмотрим эти свойства более подробно.
Внешний отступ (margin)
Внешний отступ — это невидимое пространство вокруг вашего элемента. Оно отталкивает другие элементы от него. Внешний отступ может быть как положительным, так и отрицательным. Негативное значение может привести к перекрытию некоторых элементов страницы. Независимо от того, используете ли вы стандартную или альтернативную блочную модель, внешний отступ всегда добавляется после расчёта размера видимого блока.
В примере ниже, попробуйте изменить значение margin чтобы увидеть как блок смещается, создавая или удаляя пространство (если вводить отрицательные значения margin) между этим элементом и элементом его содержащим.
Схлопывание внешних отступов
Ключевой момент, который нужно понимать в отношении внешних отступов (margin), это концепция схлопывания. Если у вас есть два элемента, внешние отступы которых соприкасаются, и оба значения margin положительные, то эти значения будут объединены в одно, равное большему из двух значений. А если одно или оба значения отрицательны, то сумма отрицательных значений будет вычтена из общей суммы.
В примере ниже есть два абзаца. Первому абзацу задан margin-bottom 50 пикселей. У второго абзаца margin-top 30 пикселей. Отступы схлопываются так, что в результате margin между двумя блоками составляет 50 пикселей, а не сумму отдельных значений margin.
Существует ряд правил, которые определяют, когда внешние отступы схлопываются, а когда нет. Для получения подробной информации см. margin collapsing. Главное, что нужно сейчас помнить, — это то, что схлопывание отступов существует. Если вы создаёте пространство с внешними отступами и не получаете ожидаемого результата, вероятно, именно это и происходит.
Рамка
Для стилизации рамок существует большое количество различных свойств: четыре рамки, и каждая из них имеет свой стиль, ширину и цвет, которыми мы можем манипулировать.
Чтобы установить индивидуальные свойства для каждой из четырёх сторон, вы можете использовать:
Для установки ширины, стиля или цвета всех рамок используйте:
Чтобы установить ширину, стиль или цвет для каждой рамки индивидуально, вы можете использовать следующие свойства:
В примере ниже мы использовали различные сокращённые и полные способы создания рамок. Поиграйте с различными свойствами, чтобы проверить, как вы поняли принципы их работы. Информацию о различных стилях, которые вы можете использовать, можно найти на страницах MDN о свойствах рамок.
Внутренний отступ (padding)
Внутренний отступ расположен между рамкой и областью контента блока. В отличии от внешних отступов (margin), вы не можете использовать отрицательные значения для padding: они должны быть положительными или равными 0. Любой применённый к вашим элементам фон будет отображаться под областью padding, поэтому внутренний отступ обычно используется, чтобы отодвинуть контент от рамок.
Блочная модель и строчные элементы
Использование display: inline-block
Элемент с display: inline-block применяет ряд свойств блочного элемента, о которых мы уже знаем:
Проверьте свои навыки!
В этой статье мы многое рассмотрели, но получится ли у вас вспомнить самую важную информацию? Вы можете пройти дополнительные тесты, чтобы убедиться, что вы всё усвоили, прежде чем двигаться дальше — см. Проверка своих навыков: блочная модель.
Заключение
Это большая часть того, что вам нужно знать о блочной модели. Возможно, вы захотите вернуться к этому уроку в будущем, если когда-нибудь обнаружите, что не понимаете, насколько велики блоки в вашей раскладке на странице.
В следующем уроке мы рассмотрим, как можно использовать фон и рамки, чтобы сделать ваши простые блоки более интересными.
Разбираем Margin Collapsing
Добрый день, уважаемые читатели!
Понимание, как происходит collapsing (схлопывание) margin-ов в CSS, может сделать жизнь web-разработчику намного легче. Давайте посмотрим, как работает схлопывание margin-ов в CSS.
Горизонтальный и вертикальный Margin Collapsing
Горизонтальные margin-ы никогда не схлопываются. А вот с вертикальными все не так просто.
Для понимания, как вертикальные margin-ы схлопываются, создадим такой простой пример.
Результат в браузере
Положительные отступы между смежными элементами
Вертикальные смежные margin-ы схлопываются. Если два элемента имеют положительный вертикальный отступ, то в результате отступом между элементами будет наибольший из двух отступов.
Результат в браузере
Смежные элементы с положительным и отрицательным отступами
Если один элемент имеет положительный отступ, а второй отрицательный, то результатом будет сумма отступов между элементами.
Результат в браузере
Если сумма отступов будет отрицательной, то последний элемент будет перекрывать первый. Посмотрим это на примере ниже.
Результат в браузере
Схлопывание отступов родительского и дочернего элемента
Если родительский элемент не имеет border или padding, тогда родительский и дочерний отступ схлопнутся и результатом будет больший из двух отступов.
Результат в браузере
Как убрать margin collapsing родительского и дочернего элемента
Чтобы убрать схлопывание, нужно задать для родительского элемента border или padding.
Результат в браузере
Подписывайтесь на рассылку 😉
Автор статьи: Alex. Категория: CSS
Дата публикации: 11.07.2014
Блог Vaden Pro
Схлопывание отступов (margin) в CSS
Бывают моменты, когда вертикальные отступы верхнего и нижнего margin приводят начинающего верстальщика в недоумение. Рассмотрим такой вариант на примере:
Верстальщик ожидает увидеть следующее:
Однако на практике получается совсем другая картина:
И тогда появляется вопрос: почему нет некоторых отступов?
Ответ на него прост. Маржин отобразился именно так, как он был прописан в CSS, а вывод отличается от ожидаемого только потому, что произошло так называемое схлопывание этого свойства.
Схлопывание маржина – это наплывание граничных отступов друг на друга.
Стоит обратить внимание, что схлопыванию подвержен только вертикальный margin. При этом, у горизонтального маржина такой особенности не наблюдается.
Как это выглядит на практике?
Схлопывание выглядит следующим образом, например, у нас есть картинка с подписью:
Вопреки ожиданием отступ между картинкой и её подписью не будет равен 35 px, больший маржин поглотит меньший, следовательно, картинку и её подпись разделит путь в 25 px.
Дочерние элементы и их родители
В таком случае отступ от тэга h1 и тэга pбудет равен 30px. Следовательно, дочерний элемент, у которого отступ больше, потянет за собой и родителя, а родительский отступ схлопнется с дочерним.
Чем это поможет?
Это свойство вертикального margin пригодится при разметке текста. Так к примеру если тэгу p задать:
То между всеми абзацами будет отступ в 5 пикселей, и нам не придётся размечать первый и последний абзац, или в худшем случае все кроме них.
Когда схлопывание не происходит?
Схлопывания не произойдёт, если:
Xiper
Иногда поведение вертикальных внешних отступов элемента margin-top и margin-bottom может вызвать недоумение у начинающего верстальщика. Возьмем, к примеру, какой-нибудь типичный фрагмент кода:
На первый взгляд может показаться, что все должно выглядеть так, как на рисунке ниже (для удобства блоки раскрашены):
На практике же все получается немного по-другому. Смотрим демо-пример.
Чтобы не мерить линейкой экран, все размеры отступов приведены на рисунке:
Откуда взялся у родительского элемента ненулевой верхний отступ? И вообще отступы у элементов сильно отличаются от ожидаемых. Что же это такое и почему так получается?
Почему отступы разные?
На самом деле никакой мистики нет — отступы отрисовываются именно такими, какими их задали в CSS. Просто произошло схлопывание margin — соприкасающиеся отступы как бы проникают друг в друга.
Заметка. Согласно спецификации CSS2.1 горизонтальные margin никогда не схлопываются. Схлопывание влияет только на вертикальные margin!
Как проявляется схлопывание вертикальных margin
Схлопывание проявляется двумя эффектами:
Схлопываются соседние отступы смежных элементов.
Вертикальный отступ между элементами равен не сумме двух отступов соседних элементов, а большему из этих отступов.
Схлопываются вертикальные внешние отступы родителя и потомка. Результирующий отступ равен большему из схлопываюшихся margin. Это приводит к тому, что если у дочернего элемента margin больше чем у родителя, то он как бы выталкивает родителя:
В примере приведенном выше у родительского элемента был верхний маржин 5px, но он схлопнулся с верхним маржином 10px дочернего элемента. В результате получили у верхний результирующий отступ 10px — родитель «провалился» на 5px вниз. Обрати внимание! Отступа между родителем и потомком в такой ситуации не будет.
Схлопываются как верхний отступ родителя с верхним отступом первого дочернего элемента, так и нижний отступ родителя с нижним отступом последнего дочернего элемента.
Если один из margin отрицательный, а другой положительный, результирующий отступ будет равен их сумме.
Где это можно использовать?
Схлопывание вертикальных внешних отступов удобно при разметке контента. Например, для абзацев задаем такое правило:
Если бы схлопывания не существовало, то отступы между абзацами были бы по 20px, а отступ перед первым абзацем и после последнего — только 10 (т.е. в два раза меньше)! Чтобы отступы были равномерными, пришлось бы дополнительно повозиться.
А так все в порядке, соседние отступы схлопнутся — получаем предсказуемый одинаковый отступ по 10px.
В каких случаях схлопывания не будет?
Схлопывание вертикальных отступов не происходит между:
Как поступать, если схлопывание отступов не нужно?
Между смежными элементами схлопывание отступов убирать, как правило, не требуется (тем не менее такая возможность есть). А вот ситуация, когда схлопываются вертикальные отступы дочернего и родительского элемента, чаще всего нежелательна.
Различные варианты убрать схлопывание смотри в статье Обходим схлопывание margin.