Есть ли способ, чтобы отключить маржа-рушится вообще? Только решения я'вэ нашел (по имени "и uncollapsing", у) влечет за собой через границу в 1px или 1 пиксель отступа. Я считаю это недопустимым: лишние пикселя усложняет расчеты без уважительной причины. Есть ли более разумный способ отключить этот маржа-рушится?
Существует два основных типа распада маржи:
Используя отступы или границы позволит избежать краха, только в последнем случае. Кроме того, любое значение переполнения
отличается от его по умолчанию ("видимый") в случае родитель будет предотвратить коллапс. Таким образом, как с overflow: autoи
переполнение: скрытый` будет иметь тот же эффект. Пожалуй, единственная разница при использовании "скрытых" является непреднамеренным последствием сокрытия контента, если родитель имеет фиксированную высоту.
Другие свойства, которые после нанесения на родителей, может помочь исправить это поведение:
поплавок: лево / право
Вы можете проверить их здесь: [
][1].Я должен добавить, что, как обычно, Интернет Эксплорер является исключением. Более конкретно, в IE 7 обочину не свернуть, когда какой-то макет указано для родительского элемента, таких как ширина
.
Источники: Sitepoint'статья s сворачивание поля
Один ловкий трюк, чтобы отключить маржа рушится то, что не имеет никакого визуального эффекта, насколько я знаю, является установка обивка родителя 0.05 Военторга
:
.parentClass {
padding: 0.05px;
}
Обивка больше не 0 так рушится выиграл'т больше не возникает, но в то же время обивка достаточно мал, что визуально его округлить до 0.
Если какая-то другая обивка по желанию, затем применять прокладки только в "направление", в котором маржа рушится не нужные, например, обивка-топ: 0.05 Пикс.;`.
Пример: в
в .noCollapse { обивка: 0.05 Пикс.; }
.parent {
background-color: red;
width: 150px;
}
.children {
margin-top: 50px;
background-color: lime;
width: 100px;
height: 100px;
}
<h3>Border collapsing</h3>
<div class="parent">
<div class="children">
</div>
</div>
<h3>No border collapsing</h3>
<div class="parent noCollapse">
<div class="children">
</div>
</div>
в
Редактировать: изменил значение с 0.1
до 0.05
. Как Крис Морган отметил в комментарии ниже, и этот небольшой тест, похоже, что действительно Firefox занимает 0.1 Военторга
прокладка во внимание. Хотя не столь 0.05 Военторга`, чтобы сделать трюк.
переполнение:скрытый
предотвращает свертывание полей, но это's не свободны от побочных эффектов, а именно он... скрывает переполнения.
Помимо этого и то, что вы'вэ упомянул, что вы просто должны научиться с этим жить и учиться в этот день, когда они на самом деле полезны (приходит каждые 3 до 5 лет).
Каждый webkit на основе браузера должна поддерживать свойства-в WebKit-маржа-развала`. Есть также подсвойствами установить только на верхнюю или нижнюю границу. Вы можете дать ему свернуть значений (по умолчанию), удалить (устанавливает маржу в 0, если есть соседняя маржа), и отдельного (предотвращает распад маржи).
Я'вэ проверял, что это работает на версиях Chrome и Safari 2014. К сожалению, я не'т думаю, что это будет поддерживаться в IE, потому что он's не основанного на WebKit.
Читать Яблоко'ов в CSS в Safari ссылка для полного объяснения.
Если вы установите флажок Мозилла'ов в CSS в WebKit расширения страницы, они перечисляют эти свойства в качестве служебной и не рекомендуем их использовать. Это потому, что они', скорее всего, не буду вдаваться в стандартный CSS только в ближайшее время и браузерах на основе движка WebKit будет их поддерживать.
На самом деле, есть один, который работает безотказно:
дисплей: флекс; флекс-направление: колонка;
как долго, как вы можете жить с поддержкой только IE10 и выше
в
.container {
display: flex;
flex-direction: column;
background: #ddd;
width: 15em;
}
.square {
margin: 15px;
height: 3em;
background: yellow;
}
<div class="container">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class="container">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
в
У меня были похожие проблемы с развалом маржи из-за материнской "позиции" набор для родственника. Вот список команд, которые можно использовать для отключения маржа рушится.
Просто попробовать, чтобы назначить любого родителя-исправить класс В разд.элемент-контейнер, или детей-исправление любого класса `в
див.маржа`. Выберите тот, который соответствует вашим потребностям лучших.
Когда
див.абсолютный
с красным фоном будет располагаться в самом верху страницы.див.абсолютный
будет позиционироваться на ту же координату Y как див.маржа
в
html, body { margin: 0; padding: 0; }
.container {
width: 100%;
position: relative;
}
.absolute {
position: absolute;
top: 0;
left: 50px;
right: 50px;
height: 100px;
border: 5px solid #F00;
background-color: rgba(255, 0, 0, 0.5);
}
.margin {
width: 100%;
height: 20px;
background-color: #444;
margin-top: 50px;
color: #FFF;
}
/* Here are some examples on how to disable margin
collapsing from within parent (.container) */
.parent-fix1 { padding-top: 1px; }
.parent-fix2 { border: 1px solid rgba(0,0,0, 0);}
.parent-fix3 { overflow: auto;}
.parent-fix4 { float: left;}
.parent-fix5 { display: inline-block; }
.parent-fix6 { position: absolute; }
.parent-fix7 { display: flex; }
.parent-fix8 { -webkit-margin-collapse: separate; }
.parent-fix9:before { content: ' '; display: table; }
/* Here are some examples on how to disable margin
collapsing from within children (.margin) */
.children-fix1 { float: left; }
.children-fix2 { display: inline-block; }
<div class="container parent-fix1">
<div class="margin children-fix">margin</div>
<div class="absolute"></div>
</div>
в
Вот [jsFiddle][1] с примеру можно изменить