Hệ thống lưới và khoảng cách khối nội tuyến

Question

Tôi vừa xem http://csswizardry.com/2013/02/introducing-csswizardry-grids/ và bản trình diễn cho nó (http://csswizardry.com/csswizardry-grids/). Tôi nghĩ rằng đây là một cách tiếp cận khá tốt để giải quyết lưới trong CSS. Vì vậy, tôi đã kiểm tra mã nguồn để xem, làm thế nào nó được thực hiện và tôi thấy một điều nhỏ, mà tôi không thể thực sự tìm ra cách nó đã được thực hiện.

Hệ thống lưới này không sử dụng phao nhưng các phần tử chặn nội tuyến, là một điều tốt. Nhưng mỗi lần tôi đang sử dụng các khối nội tuyến cho các cột có chiều rộng phần trăm/lưới vv, tôi có khoảng cách khối nội dòng này. Tôi biết có một số cách (hầu hết chỉ là những thay đổi trong HTML của bạn) để loại bỏ khoảng cách này: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Nhưng trong hệ thống lưới tôi đã cho bạn thấy không có bản sửa lỗi nào (như tôi có thể thấy) và vẫn không có khoảng cách chặn nội dòng nào cả nếu bạn kiểm tra mã nguồn. Chỉ cần để cho bạn thấy những vấn đề tôi chủ yếu có ở đây là một fiddle nhanh: http://jsfiddle.net/nN8mV/

HTML

<p>Floating columns (width 33.3%)</p> 
<div class="grid cf"> 
    <div class="grid__item">Test</div> 
    <div class="grid__item">Test</div> 
    <div class="grid__item">Test</div> 
</div> 
<p>Inline Block columns (width 33.3%)</p> 
<div class="grid grid--inlineblock"> 
    <div class="grid__item">Test</div> 
    <div class="grid__item">Test</div> 
    <div class="grid__item">Test</div> 
</div> 

CSS

.grid { 
    margin-bottom: 20px; 
} 
    .grid__item { 
     float: left; 
     width: 33.3%; 
     background: red; 
    } 
    .grid--inlineblock .grid__item { 
     float: none; 
     display: inline-block; 
    } 

Bạn có thể biết rằng, nhưng chiều rộng 33,3% không hoạt động , vì khoảng cách này. Hệ thống lưới điện dường như không có vấn đề này, mặc dù nó đang sử dụng "display: inline-block". Vì vậy, câu hỏi của tôi: CSS Wizardy đã giải quyết vấn đề này như thế nào? Tôi không thể tìm ra và thay đổi HTML (xem liên kết CSS Tricks ở trên) không thực sự hoạt động thường xuyên, vì nội dung do CMS tạo ra hoặc các nội dung khác, nơi bạn không thể điều chỉnh HTML của mình.

Cảm ơn trước sự giúp đỡ của bạn.

Answer 1

Demo từ Csswizardry bạn liên kết sử dụng comment html hack:

<div class="grid__item"></div><!-- 
--><div class="grid__item"></div> 

Kiểm tra nguồn bản demo của họ.

Cũng cập nhật của bạn jsfiddle

Answer 2

Nếu bạn không thể thay đổi HTML của bạn, bạn sẽ phải cung cấp cho các thùng chứa font-size: 0 và đặt lại font-size trong các cột hoặc cung cấp cho các cột lợi nhuận tiêu cực (có thể rắc rối).

Thông tin chi tiết: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 3

Bạn có thể làm như sau:

.grid--inlineblock { 
    word-spacing: -4px; 
} 

Và vào mục con reset word-khoảng cách

.grid--inlineblock .grid__item { 
    float: none; 
    display: inline-block; 
    word-spacing: normal; 
} 

Bạn có thể kiểm this fiddle.

Tôi không chắc liệu đây có phải là kỹ thuật tốt nhất hay không nhưng dường như nó hoạt động khá tốt.

Answer 4

Flexbox giải quyết vấn đề này hiện nay.

Bạn có thể làm như sau thay vì:

.grid--inlineblock .grid__item { 
     display: flex; 
} 

Và đó sẽ giải quyết các vấn đề khoảng cách.