div de bloque en línea fijo con margen negativo-derecho y desplazamiento flotante: ¿qué tiene de especial -4px?

Question

Esto es extraño. Intento tener un div de ancho fijo junto a un div flotante a la derecha, y no quiero reordenar los divs (porque este es un tema distribuido). Así que estoy jugando con margen negativo, justo en el div fijo, y obtengo lo que me parece extraño: si es -4px o menos, entonces el flotador se mueve hacia un lado; de lo contrario, permanece abajo.

jugar con los live demo with code at jsbin, que tiene esto:

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

Puede alguien explicar el misterio? ¿Qué tiene de especial el número -4 en este caso?

Answer 1

4px simplemente es el ancho de un "espacio" en ese font-size.

Si cambia el font-size de #container decir, 32px, it breaks.

maneras sensatas de solucionar este problema incluyen:

• Remove margin-right: -4px and then remove the whitespace between the divs in the HTML.
• No utilice display: inline-block. En cambio, float: left the left div, and float: right the right div.
  • Si le preocupa it breaking cuando no tiene un height fijo en el contenedor, debe despejar los flotadores. Use overflow: hidden en el contenedor o use clearfix.
  • With overflow: hidden (usar esto a menos que specific problems)
  • With clearfix