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

Я не понимаю, почему поля этих 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>

изображение


html css margins
person Atif    schedule 11.10.2010    source источник
comment
Эта статья о контекстах форматирования может показаться вам интересной: tjkdesign.com/articles/   -  person jensgram    schedule 11.10.2010
comment
Кажется, вам не хватает некоторых правил, которые вы там используете. Все ли элементы внутри .alignright также плавающие?   -  person Joel Glovier    schedule 11.10.2010

Ответы (5)


arrow_upward
80
arrow_downward

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

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

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

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

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

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

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

person MatTheCat    schedule 11.10.2010
comment
Просто уменьшите маржу до того, что вы хотите. - person Kissaki; 11.10.2010
comment
Отредактировано, просто увеличьте или уменьшите большее поле или используйте отступы - person MatTheCat; 11.10.2010
comment
только что узнал, что если вы плаваете элементы, применяются поля для обоих. - person Atif; 10.01.2011
comment
Я бы с осторожностью относился к использованию float в качестве хака, так как он может иметь неприятные побочные эффекты. Как правило, я опасаюсь использовать float. - person Andrew; 25.02.2014
comment
Если вы дадите часу высоту, станет ли он блоком уровня в потоке? Попытайся - person Manuel Hernandez; 12.01.2019

arrow_upward
49
arrow_downward

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

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

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

person Kissaki    schedule 11.10.2010

arrow_upward
1
arrow_downward

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

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

person GLAND_PROPRE    schedule 29.03.2018

arrow_upward
0
arrow_downward

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

person Richard Max    schedule 08.08.2012

arrow_upward
0
arrow_downward

Следите за 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>

person squarecandy    schedule 30.08.2019