Html 为什么我的 div 边距重叠，我该如何解决？

Why are my div margins overlapping and how can I fix it?

提问by Atif Mohammed Ameenuddin

I don't understand why the margins of these divs are overlapping.

我不明白为什么这些 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>[phone]</span>            
    </div><!-- contact -->
    <div class="search">
        <form method="post" action="">
            <input type="text" value="" name="s" gtbfieldid="28">
        </form>
    </div><!-- search -->
</div>

回答by MatTheCat

I think it's a collapsed margin. Only the largest margin between the bottom of the first element and the top of the second is taken into account.

我认为这是一个崩溃的边缘。仅考虑第一个元素的底部和第二个元素的顶部之间的最大边距。

It is quite normal to don't have too much space between two paragraphs eg.

两个段落之间没有太多空间是很正常的，例如。

You cannot avoid that with two adjacent elements so you have to enlarge or reduce the larger margin.

您无法避免使用两个相邻元素，因此您必须放大或缩小较大的边距。

EDIT: cf. W3C

编辑：参见。W3C

Two margins are adjoining if and only if:

• both belong to in-flow block-level boxes that participate in the same block formatting context
• no line boxes, no clearance, no padding and no border separate them
• both belong to vertically-adjacent box edges

两个边距相邻当且仅当：

• 两者都属于参与相同块格式化上下文的流入块级框
• 没有行框，没有间隙，没有填充和没有边框将它们分开
• 都属于垂直相邻的盒子边缘

So there is no collapsing with floatwhich takes the element out of the flow.

因此，没有float将元素从流中取出的折叠。

回答by Kissaki

Margins, in contrary to padding (which pads a specific width) is a “do this as a minimum distance”.

与填充（填充特定宽度）相反，边距是“以最小距离执行此操作”。

It won't put that distance to all elements.

它不会把那个距离放在所有元素上。

As you can see, the get in touchblock bottom margin is marged to the input box. That is the margin active here. The other margin, top margin from the input, is not in effect, as it's smaller and does not reach a block-element where it would actually push backthe element. The 2 margins overlap and don't affect one another.

如您所见，get in touch块底部边距已标记到输入框。这就是此处活动的保证金。另一个边距，输入的顶部边距无效，因为它更小，并且不会到达实际将元素推回的块元素。2 个边距重叠，互不影响。

回答by 538ROMEO

If you can not use padding and really need for margin not to overlap, here is one trick:

如果你不能使用填充并且真的需要边距不重叠，这里有一个技巧：

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

Please launch this snippet for demo:

请启动此代码段进行演示：

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>

回答by squarecandy

Watch out for display: flexon the parent element.

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

回答by Richard Max

Add a clear div tag between the two objects

在两个对象之间添加一个清晰的 div 标签