Почему мои поля div перекрываются и как я могу это исправить?

Ответ 1

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

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

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

EDIT: ср. W3C

Два поля смежны тогда и только тогда, когда:

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

Таким образом, с float не происходит сбрасывание, из которого элемент выходит из потока.

Ответ 2

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

Он не будет использовать это расстояние для всех элементов.

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

Ответ 3

У меня был аналогичный вопрос, поскольку я отвечал: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Ответ 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>

Ответ 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>

Ответ 6

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