항상 큰 여백 표시

Question

한 블록에 25 만 화소의 하단 여백과 10 픽셀의 상단 여백을 지정했습니다. 총 마진은 35px이지만 25px로 표시됩니다. 35 픽셀의 여백을 주면 총 35 픽셀이 표시됩니다. 왜 항상 더 큰 마진을 보여주고 있습니까?

여기 코드 라인은 다음과 같습니다

<p style="margin-bottom:25px; outline:1px dashed #000000;">aaaaaaaaaaaa</P> 
<p style="margin-top:10px; outline:1px dashed #000000;">bbbbbbbbbbbbbbbb</p> 

Answer 1

짧은 경우에, 그것은 마진이 작동하는 방법이다. 위쪽 및 아래쪽 여백이 축소 될 수 있으며이 경우 두 블록 사이의 최종 거리는 가장 큰 여백의 너비와 같습니다. 자세한 내용은

는 CSS의 standart의이 부분에서 살펴 : http://www.w3.org/TR/CSS2/box.html#collapsing-margins

두 개 이상의 마진 붕괴, 그 결과 마진 폭이 붕괴 마진 '폭의 최대 인 경우.

가능한 해결책 : 설명 된 것처럼 상단 요소의 여백 - 하단을 35px로 간단히 지정할 수 있습니다.

또 다른 방법은 요소 중 하나가 유동 할 수 있도록하는 것입니다

<p style="margin-bottom:25px; outline:1px dashed #000000;clear:both;">aaaaaaaaaaaa</P> 
<p style="margin-top:10px; outline:1px dashed #000000;clear:both;float:left;width:100%">bbbbbbbbbbbbbbbb</p> 

당신은 위의 링크 된 페이지에서 확인할 수 있습니다 다음 예외를 기반 솔루션 위

Demo

: 사이

여백 떠 다니는 상자와 다른 상자는 접히지 않습니다 (float와 그 내부에있는 자식 사이에서도 이 아님).

Answer 2

"붕괴 여백"이라고합니다. 이것은 정상적인 것이며 W3 표준을 따릅니다. 그것은 말한다 : 루트 요소의 상자의

• 여백이 붕괴하지 않습니다.
• 클리어런스 소자의 위쪽 및 아래쪽 여백 인접한 다음 형제의 인접 마진 마진 축소하지만 그 결과 마진 과 상위 블록의 아래쪽 여백을 축소하지 않는 경우.

상세 정보 :
http://www.w3.org/TR/CSS21/box.html#collapsing-margins

따라서 당신이 개 <p> 태그 :

<p style="margin-bottom:25px; outline:1px dashed #000000;">aaaaaaaaaaaa</p> 
<p style="margin-top:10px; outline:1px dashed #000000;">bbbbbbbbbbbbbbbb</p> 

다음 붕괴 것입니다.

사양에는 여백이 축소되지 않는 경우도 포함됩니다.

을 축소하지 않는 떴다 상자와 다른 상자 사이

여백 그리고 바이올린을 보여주는 붕괴 및 비 붕괴 여백 :

예를 들어, 요소가 아닌 붕괴 마진이 떴다 바이올린 :
http://jsfiddle.net/k8tFy/3/
(참고 : 당신도 떠 <p> 태그도,376와 상호 작용 볼 수 있습니다 <h2> 태그의)