CSS 레이아웃 - 여백을 사용하지 않을 때 공백

Question

우선,이 질문을 학습 목적으로하고 CSS를 더 잘 이해하고 있습니다. 둘째,이 정상화 버전을 사용하고 있습니다 :

https://necolas.github.io/normalize.css/

내 질문은 이것이다. 내 헤더 요소에 0으로 패딩을 설정하면, 내 레이아웃의 상단에 흰색 테두리를 얻을 : 내 헤더 패딩의 양을 설정할 때,

Not Working JSFiddle

, 그것은 작업을 수행합니다

Working JSFiddle

누구나 이것이 왜 있는지 말할 수 있습니다.

html, 
 
body { 
 
    height: calc(100% - 100px); 
 
} 
 
body { 
 
    font-family: verdana; 
 
} 
 
* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.container { 
 
    position: relative; 
 
    height: 100%; 
 
} 
 
header { 
 
    width: 100%; 
 
    height: 125px; 
 
    padding: 0; 
 
    background-color: red; 
 
} 
 
nav { 
 
    width: 100%; 
 
    height: 50px; 
 
    padding-left: 10px; 
 
    vertical-align: middle; 
 
    line-height: 50px; 
 
    background-color: yellow; 
 
} 
 
aside { 
 
    float: left; 
 
    width: 200px; 
 
    height: calc(100% - 25px); 
 
    padding: 10px; 
 
    background-color: blue; 
 
} 
 
section { 
 
    float: right; 
 
    padding: 10px; 
 
    height: calc(100% - 25px); 
 
    width: calc(100% - 200px); 
 
    background-color: green; 
 
} 
 
footer { 
 
    position: fixed; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 50px; 
 
    padding-left: 10px; 
 
    vertical-align: middle; 
 
    line-height: 50px; 
 
    background-color: orange; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <header> 
 
    <h1>Header</h1> 
 
    </header> 
 
    <nav>Menu</nav> 
 
    <aside>Aside</aside> 
 
    <section>Content</section> 
 
    <footer>Footer</footer> 
 
</div>

Answer 1

당신이 마진 붕괴와 부모의 수익성에 영향을 미치는하지 않는 헤더에 H1을 가지고 있기 때문입니다.

이 문제를 해결하려면 overflow: auto;을 부모 요소 (이 경우 <header> 태그)에 추가 할 수 있습니다.

---

더 많은 정보는 :

CSS margin-top of affects parent's margin