@BoltClock이 언급 한 것은 꽤 견고합니다. 그리고이 문제에 대한 몇 가지 솔루션을 추가하고 싶습니다. 이 w3c_collapsing margin을 확인하십시오 . 녹색 부분은이 문제를 어떻게 해결할 수 있는지에 대한 잠재적 인 생각입니다.

해결책 1

플로팅 된 상자와 다른 상자 사이의 여백은 무너지지 않습니다 (플로트와 플로우중인 자식 사이도 마찬가지).

즉 , demo1 또는에 추가 float:left할 수 있습니다 .#outer#inner

또한 마진을 float무효화 할 것 auto입니다.

해결책 2

플로팅 및 ‘보이는’이외의 ‘오버플로’가있는 요소와 같은 새로운 블록 서식 컨텍스트를 설정하는 요소의 여백은 인플 로우 하위 요소와 함께 축소되지 않습니다.

이외 visible,하자 넣어 overflow: hidden로 #outer. 그리고이 방법은 매우 간단하고 괜찮은 것처럼 보입니다. 나는 그것을 좋아한다.

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    overflow: hidden;
}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;
}

해결책 3

절대 위치 상자의 여백은 축소되지 않습니다 (유입 자녀도 포함).

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    position: absolute;
}
#inner{
    background: #FFCC33;
    height: 50px;
    margin: 50px;
}

또는

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    position: relative;
}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;
    position: absolute;
}

이 두 가지 방법은 정상적인 흐름을 깰 것입니다 div

해결책 4

인라인 블록 박스의 여백은 무너지지 않습니다 (유입 아이와도).

@enderskill과 동일

해결책 5

동위가 클리어런스가없는 한, 유입 블록 레벨 요소의 하단 여백은 항상 다음 유입 블록 레벨 형제의 상단 여백과 함께 축소됩니다.

형제 사이의 무너진 마진이므로 질문과 관련이 없습니다. 그것은 일반적으로 최상위 박스가 margin-bottom: 30px있고 형제 박스가 있는지를 의미합니다 margin-top: 10px. 그들 사이의 총 마진은 30px대신에 40px있습니다.

해결책 6

요소에 상단 테두리가없고 상단 패딩이없고 하위에 여유가없는 경우 유입 블록 요소의 상단 여백이 첫 번째 유입 블록 레벨 하위의 상단 여백과 함께 축소됩니다.

이것은 매우 흥미롭고 하나의 상단 경계선을 추가 할 수 있습니다

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    border-top: 1px solid red;

}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;

}

또한 <div>기본적으로 블록 수준이므로 의도적으로 선언 할 필요가 없습니다. 초보자 평판으로 인해 2 개 이상의 링크와 이미지를 게시 할 수 없어서 죄송합니다. 적어도 다음에 비슷한 것을 볼 때 문제가 어디에서 오는지 알고 있습니다.

답변

#outer {
    width:500px;
    height:200px;
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:block;
    padding-top:1px;
}

display:inline-block;