no se puede eliminar el espacio entre 2 divs horizontales dentro que contiene div

Question

Debería ser fácil, ¿no? Simplemente establece el relleno del div que contiene el exterior a cero, y establece los dos divs uno al lado del otro dentro del div externo para tener un margen: 0 pero eso no tiene ningún efecto en el espacio entre los 2 divs horizontales. Lo que necesito es el div izquierdo delineado en rojo para tocar el div del lado derecho delineado en verde.

A pesar de mi esfuerzo al usar relleno y margen, el espacio entre los 2 divisores no desaparecerá.

He mirado muchas respuestas sobre SO pero hasta ahora nadie ha roto hacia abajo a este sencillo ejemplo - el violín muestra este problema, en

http://jsfiddle.net/Shomer/tLZrm/7/

Y aquí está el código muy simple:

<div style="border: 4px solid blue; white-space:nowrap; margin:0; padding:0; width:80%"> 

    <div style="display:inline-block; width:45%; overflow:hidden; margin:0; border: 1px solid red"> Flimmy-flammy 
    </div> 

    <div style="display:inline-block; width:50%; overflow:hidden; margin:0px; border: 1px solid green"> Hambone-Sammy 
    </div> 

</div> 

Answer 1

Prueba esto:

<div style="border: 4px solid blue; margin:0; padding:0; width:80%; height: 50px;"> 

    <div style="float:left; display:inline-block; width:45%; overflow:hidden; border: 1px solid red;"> Flimmy-flammy 
    </div> 

    <div style="float: left; display:inline-block; width:50%; overflow:hidden; border: 1px solid green;"> Hambone-Sammy 
    </div> 

</div> 

Answer 2

Utilice la propiedad float.

Ejemplo con div { float: left; }: http://jsfiddle.net/tLZrm/10/.

Answer 3

El espacio dictada entre su divs es el espacio en blanco (representado como puntos), se derrumbó, en:

</div>. 
................. 
....<div> 

lugar, trate de codificación de la siguiente manera:

</div><div> 

y la brecha se desvanecerá.

Answer 4

El espacio en blanco en la fuente entre bloques en línea conduce a un espacio en el diseño. Al eliminar el espacio (no importa si se trata de un espacio único o algunos saltos de línea), los elementos se tocarán según lo previsto.

El formato del código se puede conservar a un bajo costo, ya sea comentando los espacios en blanco o haciendo que el espacio en blanco se produzca dentro de las etiquetas.

uso de comentarios:

<div> 
    <div>Content</div><!-- 
    --><div>Content</div> 
</div> 

Colocar linebreak en el interior de la etiqueta:

<div> 
    <div>Content</div 
    ><div>Content</div> 
</div> 

Answer 5

Como @Juan Lanús dijo en su respuesta, es el espacio en blanco la causa de su problema.

Una solución adicional es establecer font-size: 0px en el div que contiene.

Pero también deberá establecer font-size: initial (o un valor distinto de cero) en la división de elementos secundarios para que pueda ver el texto.