Vẫn còn khoảng trống giữa các phần tử (nút) với "lề: 0"?

Question

http://jsfiddle.net/TRVfh/2/

Một bức tranh:

Vì vậy, ngay bây giờ, có một gam chút ở giữa hai nút. và tôi muốn các nút chia sẻ cạnh giữa hoặc ít nhất là chạm vào (nếu chúng chạm vào, thay đổi CSS để có vẻ như chúng đang chia sẻ một cạnh không khó)

Nhưng Lề trái/có vẻ như không làm gì cả. Điều gì đang xảy ra ở đây?

Answer 1

Hai nút có khoảng trống giữa chúng vì lợi tức và thụt lề mà bạn đã sử dụng để định dạng HTML của mình.

Chỉ cần thả nổi cả container: http://jsfiddle.net/TRVfh/19/

.redline_changes, .redline_comments{ 
    margin-left: 0px; 
    margin-right: 0px; float: left; 
} 

Answer 2

I fixed this bằng cách thêm margin-left: -5px vào nút thứ hai.

Answer 3

Chỉ cần loại bỏ bất kỳ khoảng trống giữa DIV:

<div class="redline_changes"> 
     <a href="#">Left Button</a> 
    </div><div class="redline_comments"> 
     <a href="#">Right Button</a> 
    </div> 

Answer 4

Hình như khoảng trắng thêm trong HTML. http://jsfiddle.net/TRVfh/18/

Answer 5

Không gian được gây ra bởi dòng mới và thụt đầu dòng giữa hai div nội bộ. Loại bỏ không gian màu trắng sẽ mang lại cho hai gần hơn.

<div class="shell" style="width: 950px; "> 
     <div class="redline_changes"> 
      <a href="#">Left Button</a> 
     </div><div class="redline_comments"> 
      <a href="#">Right Button</a> 
     </div> 
</div> 

Answer 6

Đó là nhân vật không gian duy nhất được chèn tự động bằng cách bình thường. Thật không may, để sửa chữa nó, bạn sẽ cần phải làm hỏng định dạng mã của bạn:

</div><div class="redline_comments"> 
      <a href="#">Right Button</a> 
     </div> 

Here's a demo.

Answer 7

Hãy thử thêm display:inline (thay vì hiện tại display:inline-block;)

http://jsfiddle.net/D269S/

Tested trong Chrome , Firefox, Opera và IE.

Answer 8

sử dụng display:flex;
flex là viết tắt của bố cục linh hoạt.

Answer 9

bạn có thể sử dụng một spacer với tất cả 0

.example-spacer { 
    flex: 0 0 0; 
} 
or 
.example-spacer { 
    flex: 0 0 auto; 
} 
or 
.example-spacer { 
    flex: auto; 
}