Горизонтальные внешние отступы имеют весьма не хорошее свойство схлопывания, что не на шутку мешает работе верстальщика. В этой статье описаны способы, которые позволят обойти эту проблему.
Схлопывание — процесс наложения внешних отступов в вертикальном направлении между смежными объектами или между родителем и его дочерним элементом. Схлопывание может происходить только по вертикали, горизонтального не существует.
При создании интернет-ресурса важнейшим аспектом является размещение структурных составляющих на странице. Не редко одним из инструментов корректировки положения элементов является свойство margin.
При использовании этого свойства стоит обращать внимание на характерную его особенность - верхние и нижние отступы имеют возможность схлопывания. Это усложняет процесс размещения структурных элементов на странице.
В зависимости от вида схлопывания мы предлагаем несколько решений этой проблемы.
Схлопывание между смежными объектами
Простейшим способом исправления схлопывания является его отсутствие. То есть необходимо позиционировать элементы так, чтобы соседние их стороны имели только один отступ. К примеру, использовать только верхние отступы для объектов или только нижние.
Однако в таком случае возникает одно неудобство — отсутствие гибкости в расположении элементов. К примеру, первый или последний элемент должен иметь особы отступ, не такой как у всех элементов. В таком случае нужно будет прибегнуть к псевдоклассам :first-child или :last-child.
Схлопывание между родителем и потомком
В такой ситуации существует два возможных варианта удаления проблемы. Первый заключается в установке внутреннего отступа для нужной стороны родителя. Тот же эффект окажет наличие границы (border), которую можно сделать или прозрачной, или таким же цветом, как и сам контейнер. В результате чего ее не будет видно.
К особенностям этого способа нужно отнести то, что четко фиксированная высота изменится из-за наличия внутренних отступов. Точнее браузер будет прибавлять величину отступа к указанной высоте и реальная ее величина изменится.
Еще одним неплохим решением в данных условиях будет обращения к свойству overflow. Схлопывание будет устранено, если значение свойства будет не visible, а какое-нибудь другое. Также необходимым условием для работы метода является наличие фиксированного размера ширины или высоты объекта.
Программа для накрутки голосов в конкурсе бесплатно в Москве. На сайте http://www.lepidekor.ru плинтуса напольные из полиуретана. Смотрите http://www.bassmax.ru автозвук воронеж.
Стоит обратить внимание на наличие негативных последствий этого метода. При использовании свойства overflow контент может прокручиваться или вообще обрезаться, в зависимости от указанных значений ширины и высоты.
Удаление схлопывания для смежных элементов и между родителем и потомком одновременно
Рассмотренные сейчас варианты могут оказаться универсальными решениями, однако не всегда их удобно применять.
Первое решение основывается на замене внешних отступов границами. Для этого определяем цвет границы идентичным фону блока. Однако стоит отметить, что применения такого способа не желательно по ряду причин:
- Использование свойства не по назначению
- Не сработает, если для объекта уже были указаны границы
- Также не сработает при наличии полицветного фона.
- Для IE6 толщина границы будет входит в перерасчет высоты блока, что необходимо учитывать.
Допускается также заменять позиционирование внешними отступами на расположение через внутренние — свойство padding. В этом случае нужно помнить о двух важных моментах. Первый заключается в том, что на внутренние отступы распространяется заливка заднего фона объекта. А также значение padding влияет на перерасчет высоты блока.
Расположить элементы посредством абсолютного позиционирования. В этом случае за объектом не будет закреплено место в структуре страницы. Это не всегда желательный эффект.
Схлопывание не происходит, когда блок обладает свойствами плавающего объекта. Проблема этой методики идентична с абсолютным позиционированием — выпадение из общей структуры.
В каких браузерах работает?
| 6.0+ | 7.0+ | 9.5+ | 4.0+ | 3.0+ | - | - |
