Проблема перекрытия полей CSS

Question

Пожалуйста, посмотрите мой код, я не понимаю, почему поля этих элементов перекрываются.

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

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

---

Answer 1

Я думаю, что это сжатая разница. Учитывается только наибольшая разница между нижней частью первого элемента и верхней частью второго.

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

Вы не можете избежать этого с двумя смежными элементами, поэтому вам нужно увеличить или уменьшить больший запас.

РЕДАКТИРОВАТЬ: ср. W3C

К двум полям примыкают, если и только если:

• оба принадлежат блокам уровня блока в потоке, которые участвуют в одном и том же контексте форматирования блока
• без строковых блоков, без зазора, без отступов и границ, разделяющих их
• оба принадлежат вертикально смежным краям коробки

Таким образом, нет разрушения с float, который выводит элемент из потока.

Answer 2

Поля, в отличие от отступов (которые накладывают определенную ширину) - это «сделать это как минимальное расстояние».

Не будет установлено это расстояние для всех элементов.

Как видите, нижнее поле блока get to touch помечено для поля ввода. Это маржа активна здесь. Другое поле, верхнее поле ввода, не действует, так как оно меньше и не достигает блочного элемента, где он фактически отодвигает элемент. 2 поля перекрывают друг друга и не влияют друг на друга.

Answer 3

Если вы не можете использовать отступы и действительно нужно, чтобы поля не перекрывались, вот одна хитрость:

.btn {
    /* hack for a 2px margin */
    border-top: 2px #fff solid !important;
    /* 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>

Answer 4

Добавить четкий тег div между двумя объектами