2015-07-26 4 views
1

Я всегда считал, что нижнее и верхнее поле будет таким же, как более толстое нижнее поле в элементах интервала, но это не так:Почему маржа CSS: 1px 0 1px 0 не соответствует интервалу поля: 2px 0 0 0

<h4>Margin: 1px 0 1px 0</h4> 
    <div style="background-color: gray;margin: 1px 0 1px 0;height: 50px;"></div> 
    <div style="background-color: gray;margin: 1px 0 1px 0;height: 50px;"></div> 
<br> 
<h4>Margin: 2px 0 0 0</h4> 
    <div style="background-color: gray;margin: 2px 0 0 0;height: 50px;"></div> 
    <div style="background-color: gray;margin: 2px 0 0 0;height: 50px;"></div> 

enter image description here

Почему это? Safari FF и хром все равно.

http://jsfiddle.net/vzp0kL9d/

+0

Возможный дубликат [по какой причине правила краха поля были введены в CSS?] (Http://stackoverflow.com/questions/1438114/for-what-reason-margin-collapse-rules-were-introduced-in- css) – icktoofay

+0

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

ответ

3

Это из-за margin collapsing.

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

Иногда это может быть быстрое исправление для использования прокладки вместо поля.