запас по уходу за детьми, добавив запас для родителей

Question

как если у меня есть следующий код: HTML:

<section class="home"> 
</section> 
<section class="main"> 
    <h1>Hello</h1> 

</section> 

CSS код:

html,body{ 
    height: 100%; 
    width: 100%; 
} 
.home{ 
    background: #000; 
    height: 100%; 
} 
.main{ 
    height: 100%; 
    background: pink; 
} 

Почему белое пространство или, скорее, разница между 2-х секций ?? проблема кажется тегом h1. если я это сделаю:

h1{ 
    margin: 0; 
} 

Bham! задача решена .

У меня есть две проблемы с этим.

1-я второстепенная проблема, теперь этот стиль может быть применен браузером, я исправлю это с помощью сброса без проблем. но это все еще проблема.

Моя вторая проблема. И большая проблема, теперь предположим, что браузер или даже я явно указываю, что край верхнего края h1 должен быть указан 20-30px, поле должно быть со стороны .main section ПОЧЕМУ МАРГИН ПРИКЛАДНО К h1, КОТОРЫЙ ВНУТРИ. МОЖЕТ БЫТЬ КАК МАРГИН МЕЖДУ .main и .home? В чем причина этой уникальной проблемы?

Я прочитал о маржинальной-складыванию:

Mozilla

css tricks

Но это, кажется, больше похож РЕБЕНОК-MARGIN добавляющие-MARGIN-TO-РОДИТЕЛЕЙ.

Jsfiddle of issue

Спасибо.

Alexander.

Answer 1

http://jsfiddle.net/naeemshaikh27/qbaucv3j/1/

.main{ 
     overflow: hidden; 
     height: 100%; 
     background: pink; 
    } 

Это нормальное поведение (в том числе реализаций браузера, по крайней мере). Маржа не влияет на позицию ребенка по отношению к ее родительскому объекту, если родительский элемент не имеет отступы, и в этом случае большинство браузеров затем добавят маркер ребенка к дополнению родителя.

источникhttps://stackoverflow.com/a/1939980/3556874

Answer 2

Ожидаемое поведение в браузерах слишком часто неожиданно.

То, что я действительно хотел достичь, задав этот вопрос, заключалось не только в том, чтобы решить проблему, но и на самом деле узнать, что вызывает проблему.

, который я в конце концов нашел в потоке не то же самое, но похоже, и позвольте мне процитировать часть, что бы решить загадку:

задворках родительского DIV и h1 объединяются, чтобы сформировать единый край» , хотя они вложены, потому что они имеют прилегающие поля без прокладки или границы между ними.

и сейчас подходит к решению хорошо для меня,

переполнения: скрытый от родительского DIV работал просто отлично.

такое же решение, конечно, хорошо освещено naeem в более раннем ответе.

Так Heres код: HTML: -

<section class="home"></section> 
<section class="main"> 
     <h1>Hello</h1> 

</section> 

CSS:

html,body{ 
     height: 100%; 
     width: 100%; 
    } 
    .home{ 
     background: #000; 
     height: 100%; 
    } 
    .main{ 
     overflow: hidden; 
     height: 100%; 
     background: pink; 
    } 

Here is the fiddle