修复了带有负边距和浮动浮动的内联块 div：-4px 有什么特别之处？

Question

这很奇怪。我试图在右浮动 div 旁边有一个固定宽度的 div，我不想重新排序 div（因为这是分布式主题）。所以我在固定 div 上使用负边距，我得到了在我看来很奇怪的东西：如果它是 -4px 或更小，那么浮动会移到一边；否则，它会停留在下方。

玩live demo with code at jsbin，它有这个：

<style>
  .container {
    width: 200px;
    height: 200px;
  }
  .box {
    width: 100px;
    height: 100px;
  }
  .one {
    margin-right: -4px; /* If <= -4, .two box shifts up */
    display: inline-block;
  }
  .two {
    float: right;
  }
</style>
  <div class="container">
    <div class="box one"></div>
    <div class="box two"></div>
  </div>

有人能解释一下其中的奥秘吗？在这种情况下，数字 -4 有什么特别之处？

Answer 1

4px 恰好是font-size 处“空格”的宽度。

如果您将#container 的font-size 更改为32px、it breaks。

解决此问题的明智方法包括：

• Remove margin-right: -4px and then remove the whitespace between the divs in the HTML.
• 不要使用display: inline-block。相反，float: left the left div, and float: right the right div。
  • 如果您在容器上没有固定的height 时担心it breaking，那么您必须清除浮动。在容器上使用overflow: hidden，或使用clearfix。
  • With overflow: hidden（除非你有specific problems，否则使用这个）
  • With clearfix