내 Div 요소 여백이 겹치는 이유는 무엇이며 어떻게 해결할 수 있습니까?

Div 요소의 여백이 겹칩니다

질문:

Div 요소의 여백이 왜 있습니까? 내 코드의 요소가 겹쳐서 요소가 뭉치게 됩니까?

코드:

<code class="css">.alignright {float: right}
#header .social {margin-top: 50px;}
#header .social a {display: inline-block;}
#header .social .fb {width: 64px; height: 1px; padding-top: 60px; overflow: hidden;}
#header .social .twit {width: 64px; height: 1px; padding-top: 60px; overflow: hidden;}
#header .contact {margin: 20px 70px 20px 0; font-size: 14px; font-weight: bold;}
#header .contact span {color: #FFFFFF;}
#header .search {margin: 10px 0 0;}</code>

<code class="html"><div class="alignright">
    <div class="social">
        <a href="#" class="twit"></a>
        <a href="#" class="fb"></a>
    </div><!-- social -->
    <div class="contact">
        Get in Touch: <span>+44 10012 12345</span>            
    </div><!-- contact -->
    <div class="search">
        <form method="post" action="">
            <input type="text" value="" name="s" gtbfieldid="28">
        </form>
    </div><!-- search -->
</div></code>

답변:

마진이 겹치는 현상은 '마진 붕괴' 현상으로 인해 발생했을 가능성이 높습니다. 이는 한 요소의 아래쪽 여백과 인접한 요소의 위쪽 여백이 결합되어 더 큰 단일 여백을 형성할 때 발생합니다.

코드에서 .social div의 아래쪽 여백과 .social div의 위쪽 여백 .contact div가 축소되어 요소가 너무 가깝게 표시됩니다.

W3C에 따르면 다음 기준을 충족하면 두 여백이 축소됩니다.

• 두 여백 모두 블록에 속합니다. 동일한 블록 서식 컨텍스트에서 사용됩니다.
• 여백을 구분하는 줄 상자, 여백, 패딩 또는 테두리가 없습니다.
• 두 여백 모두 수직으로 인접한 상자 가장자리에 있습니다.

코드의 여백이 이러한 기준을 충족하므로 축소됩니다.

해결책:

이 문제를 해결하는 몇 가지 방법이 있습니다.

• 여백 대신 패딩을 사용하세요. 패딩은 접히지 않으므로 간격 요소에 여백 대신 사용하면 문제를 방지할 수 있습니다.
• clear:both를 상위 컨테이너. 이렇게 하면 여백이 축소되는 것을 방지하는 새로운 블록 형식 지정 컨텍스트가 생성됩니다.
• 부동 소수점을 사용합니다. 부동 요소는 일반 흐름에서 제거되어 여백이 축소되는 것을 방지합니다. 무너지는 것을 방지합니다.

위 내용은 내 Div 요소 여백이 겹치는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!