Làm cách nào để loại bỏ khả năng hiển thị không gian giữa các phần tử nội tuyến?

Question

Nói rằng tôi có một vài thẻ inline-block div, giống như hình ảnh lớp

<div class="image"> 

</div> 
<div class="image"> 

</div> 

này chỉ đặt kích thước của chúng để 100x100 và một màu nền màu xám. Biên độ và đường viền của chúng được đặt thành 0, nhưng vẫn có khoảng cách giữa hai hình chữ nhật.

Nếu tôi viết mã HTML như thế này, tuy nhiên:

<div class="image"> 

</div><div class="image"> 

</div> 

Loại bỏ tất cả các khoảng trắng giữa các div, khoảng cách sẽ biến mất.

Vì tôi không muốn viết HTML của mình như vậy, tôi nghĩ rằng phải có cách để xóa khoảng trắng bằng cách sử dụng CSS. Tôi không quan tâm nếu khoảng trắng bị xóa, bị ẩn hoặc bị thu nhỏ miễn là khả năng hiển thị của nó bị xóa.

Nhờ sự giúp đỡ

---

Theo yêu cầu, JSFiddle: http://jsfiddle.net/6h3Jx/

---

cập nhật với từ cách dòng: http://jsfiddle.net/6h3Jx/1/

Answer 1

nó là hành vi phần tử nội tuyến, vì vậy hãy thử thả nổi sang trái. http://jsfiddle.net/aVrSx/

Answer 2

đặt sau đây trên một yếu tố phụ huynh:

word-spacing:-4px; 

Hoặc thử:

font-size:0px; 

Nó có thể làm việc tốt hơn vì nó sẽ không bị ảnh hưởng bởi thay đổi kích thước văn bản.

Answer 3

bạn có thể đặt "display: flex;" thuộc tính cho trình bao bọc gốc của chúng:

.flexbox { 
    display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */ 
    display: -moz-box;   /* OLD - Firefox 19- (buggy but mostly works) */ 
    display: -ms-flexbox;  /* TWEENER - IE 10 */ 
    display: -webkit-flex;  /* NEW - Chrome */ 
    display: flex;    /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
}