nie można wyeliminować spacji między 2 poziomymi elementami div zawierającymi div

Question

Powinno być łatwe, prawda? Po prostu ustaw zewnętrzne wypełnienie elementu div na zero i ustaw oba elementy obok siebie, aby uzyskać margines: 0, ale nie ma to wpływu na przestrzeń między 2 poziomymi elementami div. Potrzebuję czerwonego krzyża z lewej strony, aby dotknąć zakreślonego na zielono prawostronnego elementu div.

Pomimo moich wysiłków przy użyciu wypełnienia i marginesu, przestrzeń między 2 div nie zniknie.

Mam spojrzał na wiele odpowiedzi na SO, ale do tej pory nikt nie jest złamana to do tego prostego przykładu - mój skrzypce pokazuje ten problem, w

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

I tu jest bardzo prosty kod:

<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

Spróbuj tego:

<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

Użyj właściwości float.

Przykład z div { float: left; }: http://jsfiddle.net/tLZrm/10/.

Answer 3

Przestrzeń świadczonych między div jest spacja (reprezentowane kropek), zwinięte, w:

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

Zamiast próbować kodowania tak:

</div><div> 

i luka zniknie.

Answer 4

Białe znaki w źródłach między blokami wstawianymi prowadzą do luki w układzie. Po usunięciu spacji (bez względu na to, czy jest to pojedyncza spacja, czy też pewne przerwy w linii nie mają znaczenia), elementy będą dotykać zgodnie z przeznaczeniem.

Formatowanie kodu można zachować przy niewielkich kosztach, albo poprzez skomentowanie białych znaków, albo wprowadzenie białych znaków w tagach.

Korzystanie komentarze:

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

Umieszczenie LINEBREAK wewnątrz tagu:

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

Answer 5

Jak @Juan Lanus powiedział w swojej odpowiedzi, że jest to spacja powoduje problem.

Dodatkowym rozwiązaniem jest ustawienie font-size: 0px na zawierającym div.

Ale musisz także ustawić font-size: initial (lub wartość niezerową) na div dzieci, aby nadal widzieć tekst.