내 div 여백이 겹치는 이유는 무엇이며 어떻게 수정할 수 있습니까?

Question 1

이 div의 여백이 겹치는 이유를 이해할 수 없습니다.

.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;}

<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>

스 니펫 확장

Question 2

마진이 무너진 것 같아요. 첫 번째 요소의 하단과 두 번째 요소의 상단 사이의 가장 큰 여백 만 고려됩니다.

예를 들어 두 단락 사이에 너무 많은 공간이없는 것은 매우 정상입니다.

~~두 개의 인접한 요소로이를 피할 수 없으므로 더 큰 여백을 확대하거나 줄여야합니다.~~

편집 : cf. W3C

다음과 같은 경우에만 두 개의 여백이 인접합니다.

둘 다 동일한 블록 형식화 컨텍스트에 참여하는 인플 로우 블록 레벨 상자에 속합니다.

라인 박스 없음, 클리어런스 없음, 패딩 없음 및 테두리 없음

둘 다 수직으로 인접한 상자 모서리에 속합니다.

따라서 float요소를 흐름에서 제거하는 붕괴가 없습니다 .

Question 3

여백은 패딩 (특정 너비에 패딩)과는 반대로 "최소 거리로 수행"입니다.

모든 요소에 그 거리를 두지는 않습니다.

보시다시피, get in touch 블록 하단 여백은 입력 상자에 마징됩니다. 이것이 여기서 활성화 된 마진입니다. 다른 여백, 입력의 상단 여백은 더 작고 실제로 요소를 밀어내는 블록 요소에 도달하지 않기 때문에 효과가 없습니다 . 2 개의 여백이 겹치고 서로 영향을주지 않습니다.

Question 4

패딩을 사용할 수없고 실제로 여백이 겹치지 않도록해야하는 경우 한 가지 트릭이 있습니다.

.btn {
    /* hack for a 2px margin */
    border-top: 2px #fff solid;
    /* this is important if you have a background-color
    and don't want to see it underneath the transparent border*/
    background-clip: padding-box;
}

데모를 위해이 스 니펫을 실행하십시오.

코드 스 니펫 표시

div {
  margin: 10px;
  background: rgb(48, 158, 140);
  padding: 5px 15px;
  font-weight: bold;
  color: #fff;
}

.fake-margin {
  border-top: 10px solid transparent;
  background-clip: padding-box;
}

<div>Margin applied is 10px on each sides</div>
<div>the first two have only 10px between them</div>
<div class="fake-margin">the last two have 10 + 10px</div>
<div class="fake-margin">= 20 px</div>

스 니펫 확장

Question 5

조심 display: flex부모 요소에.

.flex {
  display: flex;
  flex-direction: column;
}

.block {
  display: block;
}


/* css for example only */
div {
  padding: 1em;
  background: #eee;
}
p {
  font-size: 20px;
  margin: 1em 0;
  background: pink;
  padding: 5px;
}
p:first-child {
  margin-top: 0;
}

<h1>display: flex</h1>
<div class="flex">
  <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor.</p>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
  <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor.</p>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>
<h1>display: block</h1>
<div class="block">
  <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor.</p>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
  <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
  <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>

스 니펫 확장

Question 6

두 개체 사이에 명확한 div 태그 추가