Исправлен div inline-block с отрицательным полем вправо и смещением float: что особенного в -4px?

Question

Это странно.Я пытаюсь создать div с фиксированной шириной рядом с div-элементом, плавающим вправо, и не хочу переупорядочивать div (потому что это распределенная тема).Так что я играю с отрицательным полем справа на фиксированном div, и я получаю то, что мне кажется странным: если это -4px или меньше, то float перемещается в сторону;в противном случае он останется ниже.

Поиграйте с live-демо с кодом на 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.

Если вы измените font-size из #container на 32px, , то оно сломается .

Разумные способы исправить это включают:

• Удалите margin-right: -4px, а затем удалите пробел между div с в HTML .
• Не используйте display: inline-block. Вместо этого float: left слева div и float: right справа div.
  • Если вы беспокоитесь о том, что сломается , когда у вас нет фиксированного height на контейнере, тогда вы должны очистить поплавки. Используйте overflow: hidden на контейнере или clearfix .
  • С overflow: hidden (используйте это, если у вас нет определенных проблем )
  • С clearfix