Чому мої поля 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

Я думаю, що це згорнута маржа. Враховується лише найбільший запас між низом першого елемента та верхом другого.

Цілком нормально не мати занадто багато місця між двома абзацами, наприклад.

Цього не можна уникнути за допомогою двох суміжних елементів, тому доведеться збільшувати або зменшувати більший запас.

РЕДАКТУВАТИ: пор. W3C

Два поля примикають тоді і лише тоді, коли:

обидва належать до поточних блоків рівня блоку, які беруть участь в одному контексті форматування блоків

без лінійних коробок, без зазору, без заповнення та без кордону їх не розділяють

обидва належать до сусідніх по вертикалі країв коробки

Отже, немає руйнування, floatяке виводить елемент із потоку.

Question 3

Поля, на відміну від заповнення (яке накладає певну ширину), є "робіть це як мінімальну відстань".

Це не покладе таку відстань до всіх елементів.

Як бачите, нижнє поле блоку контакту нижнє поле розміщується до поля введення. Тобто маржа, активна тут. Інше поле, верхнє поле від вводу, не діє, оскільки воно менше і не досягає блочного елемента, куди воно фактично відштовхувало б елемент. 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>

Expand snippet

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 між двома об’єктами