không thể loại bỏ khoảng trống giữa 2 div nằm ngang bên trong có chứa div

Question

Nên dễ dàng, phải không? Chỉ cần đặt phần đệm bên ngoài chứa div thành 0 và đặt hai div bên cạnh bên trong div bên ngoài để có lề: 0 nhưng điều đó không ảnh hưởng đến khoảng trống giữa 2 div ngang. Những gì tôi cần là div bên trái được vạch viền màu đỏ để chạm vào div bên phải được viền màu xanh lục.

Mặc dù nỗ lực của tôi bằng cách sử dụng phần đệm và lề, khoảng cách giữa 2 div sẽ không biến mất.

tôi đã xem xét nhiều câu trả lời trên SO nhưng cho đến nay không ai bị hỏng nó xuống để ví dụ đơn giản này - fiddle tôi thấy vấn đề này, tại

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

Và đây là đoạn code rất đơn giản:

<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

Hãy thử điều này:

<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

Sử dụng thuộc tính float.

Ví dụ với div { float: left; }: http://jsfiddle.net/tLZrm/10/.

Answer 3

Không gian render giữa các div của bạn là khoảng trắng (biểu diễn dưới dạng dấu chấm), sụp đổ, trong:

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

Thay vào đó, hãy thử mã hóa như thế này:

</div><div> 

và khoảng cách sẽ biến mất.

Answer 4

Khoảng trắng trong nguồn giữa các khối nội tuyến dẫn đến khoảng trống trong bố cục. Bằng cách loại bỏ không gian (cho dù đó là một không gian duy nhất hoặc một số ngắt dòng không quan trọng) các yếu tố sẽ liên lạc như dự định.

Định dạng mã có thể được giữ lại với chi phí nhỏ, bằng cách nhận xét ra khoảng trắng hoặc bằng cách tạo khoảng trắng xuất hiện trong thẻ.

Sử dụng nhận xét:

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

Đặt linebreak bên trong tag:

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

Answer 5

Giống như @Juan Lanus nói trong câu trả lời của mình, nó là khoảng trắng gây ra sự cố.

Một giải pháp bổ sung là đặt font-size: 0px trên div chứa.

Nhưng bạn sẽ cần phải đặt font-size: initial (hoặc giá trị khác 0) trên div trẻ em để bạn vẫn có thể xem văn bản của mình.