为什么浮动和填充组合导致元素推动通过边距？

Question

我有一个有三行的页脚。第一行是左边两个div。第二行是一个“分隔符”。页脚宽度为100的行。第三行将剩下3个div。

问题出在第一行。我的中间线有一个margin-top:40px;。第一个浮动元素应该位于顶部，但第二个浮动元素（它将是一个文本框并且内部有填充）位于顶部精细没有填充，但当我放入10px填充时，它位于40px以上它应该，但为它周围的元素增加额外的余量。

＆＃13;

＆＃13;

.footer {
  background-color: #172135;
  padding: 40px;
}
.footer-links {
  margin: 0px auto 0px auto;
  float: left;
}
.middle-line {
  width: 100%;
  border: 1px solid #1889b4;
  padding: 0;
  margin-top: 40px;
}
.newsletter {
  padding: 10px;
  border: 1px solid #188ab4;
  width: 300px;
  font-family: 'rBblack';
  font-size: 12px;
  color: white;
  text-transform: uppercase;
  float: left;
}

＆＃13;

<footer class="footer clear" role="contentinfo">
  <div class="footer-row-1 clear">
    <div class="footer-links">
     stuff
    </div>
    <div class="newsletter">
      Sign Up For Our Newsletter
    </div>
  </div>
  <div class="footer-row-2 clear">
    <div class="middle-line"></div>
  </div>
  <div class="footer-row=3 clear">
    more stuff
  </div>
</footer>

＆＃13;

＆＃13;

＆＃13;

****请注意*****代码片段不是精确的表示，因为css reset和clearfix缺失所以不正确。其他人编辑了这个并把它放在那里......

Answer 1

除非您告诉它，否则浏览器会将元素设置为您指定的宽度，然后然后添加填充等

如果你设置了border-sizing属性，这将阻止它发生;

box-sizing: border-box;

尝试将其添加到CSS声明中

Answer 2

在回顾了您对我的旧的，现在无关紧要的答案所说的内容之后，我想我发现了您的问题。

padding:10px;

为所有4个边添加填充。它在功能上等同于

padding: 10px 10px 10px 10px;

现在，时事通讯div比同一个div中的其他东西要高得多，并且浏览器被迫通过使容器div更大来进行补偿。当你这样做时，容器div的高度增加了20个像素，这似乎为其他元素增加了额外的余量。

要删除它，您需要使用其中任何一个

padding: 0 10px;
padding: 0 10px 0 10px;

按照http://www.w3schools.com/cssref/pr_padding.asp 或者将左侧和右侧的填充添加到10px，但顶部和底部将保持为0.时事通讯div将不再过大，使得容器div更大，这将使其看起来有余量其他。 编辑（附加选项）： 但是，如果你想保持顶部和底部填充，你有3个主要选项。

1）将填充添加到父级内部的另一个div以及简报中。他们将与时事通讯排成一行，并在上方和下方留出额外空间。你可能想缩小中间div的高度以弥补增加。 2）从其父div中完全删除简报。设置新闻稿及其父div的宽度，使它们加起来100％，包括填充和边框，或使用box-sizing：border框，并向左浮动，使它们水平排列。现在，您可以根据需要制作新闻通讯，这不会影响其他人。 3）你修复了父div的高度，这样新闻通讯可以比它的父div大，但如果不小心这会导致布局出现问题，因为它可能会重叠。

Answer 3

您可以通过向margin-top:-10px;添加position: relative; top: -10px;或.newsletter来补偿填充的移位。

＆＃13;

＆＃13;

.footer {
  background-color: #172135;
  padding: 40px;
}
.footer-links {
  margin: 0px auto 0px auto;
  float: left;
}
.middle-line {
  width: 100%;
  border: 1px solid #1889b4;
  padding: 0;
  margin-top: 40px;
}
.newsletter {
  padding: 10px;
  margin-top: -10px; /* negative or padding value - readjusts position back up */
  border: 1px solid #188ab4;
  width: 300px;
  font-family: 'rBblack';
  font-size: 12px;
  color: white;
  text-transform: uppercase;
  float: left;
}

＆＃13;

<footer class="footer clear" role="contentinfo">
  <div class="footer-row-1 clear">
    <div class="footer-links">
     stuff
    </div>
    <div class="newsletter">
      Sign Up For Our Newsletter
    </div>
  </div>
  <div class="footer-row-2 clear">
    <div class="middle-line"></div>
  </div>
  <div class="footer-row=3 clear">
    more stuff
  </div>
</footer>

＆＃13;

＆＃13;

＆＃13;