non può eliminare lo spazio tra 2 div orizzontali all'interno contenente div

Question

Dovrebbe essere facile, giusto? Basta impostare a zero il pad contenente il div esterno contenente e impostare i due div affiancati all'interno del div esterno per avere margine: 0 ma ciò non ha alcun effetto sullo spazio tra i 2 div orizzontali. Ciò di cui ho bisogno è il div sinistro di sinistra rosso per toccare il div laterale destro con la linea verde.

Nonostante il mio sforzo con padding e margine, lo spazio tra i 2 div non andrà via.

Ho guardato molte risposte su SO ma finora nessuno ha rotto verso il basso per questo semplice esempio - mio violino mostra questo problema, a

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

Ed ecco il codice molto semplice:

<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

Prova questo:

<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

utilizzare la proprietà float.

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

Answer 3

Lo spazio reso tra le div è lo spazio bianco (rappresentati come punti), è crollato, in:

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

Invece, provare la codifica in questo modo:

</div><div> 

e lo spazio svanirà.

Answer 4

Lo spazio bianco nella sorgente tra i blocchi in linea porta a una lacuna nel layout. Rimuovendo lo spazio (indipendentemente dal fatto che si tratti di uno spazio singolo o di alcune interruzioni di linea non importa), gli elementi verranno toccati come previsto.

La formattazione del codice può essere mantenuta ad un costo leggero, commentando gli spazi bianchi o facendo spazio agli spazi all'interno dei tag.

Utilizzare i commenti:

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

Posizionamento LINEBREAK all'interno tag:

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

Answer 5

Come @Juan Lanus ha detto nella sua risposta, è lo spazio bianco che causa il problema.

Un'ulteriore soluzione è impostare font-size: 0px sul div contenitore.

Ma sarà necessario impostare anche font-size: initial (o su un valore diverso da zero) sul div per bambini in modo da poter vedere ancora il testo.