자식 여백은 부모 키에 영향을주지 않습니다.

자식 여백은 부모 키에 영향을주지 않습니다.

---

이것은 일부에게는 분명 할 수 있지만 이에 대한 해결책을 찾기가 어려웠습니다.

답변자 참고 사항 : "진짜 질문"으로 이동하십시오. 감사합니다. :)

그러나 나는 그것을 찾았습니다-문제에 대한 설명 아래에 있습니다.

문제 :

이와 같은 간단한 예에서 자식 여백은 부모 높이에 영향을주지 않습니다.

HTML

<div class="parent">
    <div class="child">Some text...</div>
</div>

CSS

.parent{ background: black; }
.child{
    background: LightBlue;
    margin: 20px;
}

바이올린 : http://jsfiddle.net/k1eegxt3/

해결책:

매우 간단합니다. 기본적으로 자식 여백은 일반적으로 부모 높이에 영향을주지 않습니다. 일반적으로 부모 요소에 여백이 "밀어 넣을"수있는 항목을 추가하여 쉽게 수정할 수 있습니다 ( 예 : 부모 에 패딩 또는 테두리 추가).

조정 된 CSS :

.parent{ background: black; padding: 1px; /* PADDING ADDED */ }
.child{
    background: LightBlue;
    margin: 20px;
}

바이올린 : http://jsfiddle.net/fej3qh0z/

진짜 질문 :

그러나 실제로 이것이 어떻게 수정되는지가 아니라 왜 이런 식으로 작동하는지 알고 싶습니다.
누군가이 동작을 설명하는 답변을 작성하고 DOC 참조를 추가 할 수 있습니까?

많은 감사합니다 :)

---

여백 축소 라고 합니다 . www.w3.org의 문서 :

6.2. 접히는 여백

인접한 특정 여백이 결합되어 단일 여백을 형성합니다. 이러한 여백을 "붕괴"라고합니다. 비어 있지 않은 내용, 패딩 또는 테두리 영역 또는 분리 할 공간이없는 경우 여백이 인접 해 있습니다.

예를 포함한 추가 정보 : http://www.w3.org/TR/css3-box/#collapsing-margins

overflow: auto;이를 수정하기 위해 상위 요소에 추가 할 수 있습니다 .

바이올린 : http://jsfiddle.net/k1eegxt3/2/

참고 URL : https://stackoverflow.com/questions/27829250/child-margin-doesnt-affect-parent-height