Rozmieszczenie w siatce i interlinię między wierszami

Question

Właśnie widziałem http://csswizardry.com/2013/02/introducing-csswizardry-grids/ i wersję demo (http://csswizardry.com/csswizardry-grids/). Myślę, że jest to całkiem dobre podejście do rozwiązywania siatki w CSS. Więc sprawdziłem kod źródłowy, żeby zobaczyć, jak to się robi i widziałem jedną małą rzecz, której naprawdę nie mogę zrozumieć, jak to się stało.

Ten system siatki nie używa elementów pływających, ale wbudowanych w blok, co jest dobre. Ale za każdym razem, gdy używam bloków wbudowanych dla kolumn szerokości/siatki itp., Mam ten wbudowany odstęp bloków. Wiem, że istnieje kilka sposobów (głównie zmiany w kodzie HTML), aby pozbyć się tego odstępu: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Ale w systemie siatki pokazałem, że nie ma żadnej z tych poprawek (o ile widzę) i wciąż w ogóle nie ma odstępu między wierszami po sprawdzeniu kodu źródłowego. Wystarczy, aby pokazać problem i najczęściej mają o to szybkie skrzypce: 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; 
    } 

Zapewne wiesz, że, ale 33,3% szerokość nie działa , z powodu tego odstępu. Wydaje się, że systemy gridowe nie mają tego problemu, chociaż używają one również "display: inline-block". Moje pytanie: w jaki sposób CSS Wizardy rozwiązał ten problem? Nie mogę tego zrozumieć, a zmiana HTML (patrz link CSS powyżej) nie działa zbyt często, z powodu treści generowanych przez CMS lub innych rzeczy, w których nie można dostosować swojego HTML.

Z góry dziękuję za pomoc.

Answer 1

Demo z Csswizardry jesteś połączony wykorzystuje komentarz HTML Hack:

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

sprawdzić swoje źródło demo.

aktualizowany także swój jsfiddle

Answer 2

Jeśli nie można zmienić HTML, musisz dać pojemnik font-size: 0 i zresetować font-size w kolumnach lub dać kolumn marginesy ujemne (może być kłopotliwe).

Więcej szczegółów: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 3

Można wykonać następujące czynności:

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

A na punkcie dziecka zresetować word-spacing

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

Można kasy this skrzypce.

Nie jestem pewien, czy to najlepsza technika, ale wygląda na to, że działa całkiem dobrze.

Answer 4

Flexbox rozwiązuje ten problem w dzisiejszych czasach.

Można wykonać następujące zamiast:

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

I to powinno rozwiązać problemy odstępów.