Grid System e spaziatura inline-block

Question

ho appena visto http://csswizardry.com/2013/02/introducing-csswizardry-grids/ e la demo (http://csswizardry.com/csswizardry-grids/). Penso che questo sia un buon approccio per risolvere le griglie in CSS. Quindi ho controllato il codice sorgente per vedere, come è stato fatto e ho visto una piccola cosa, che non riesco davvero a capire come è stata fatta.

Questo sistema a griglia non sta utilizzando i float ma gli elementi di blocco in linea, che è una buona cosa. Ma ogni volta che utilizzo blocchi in linea per colonne/griglie di larghezza percentuale ecc. Ho questa spaziatura dei blocchi in linea. So che ci sono diversi modi (per lo più solo modifiche nel codice HTML) per eliminare questa spaziatura: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Ma nel sistema di rete ti ho mostrato che non c'è nessuna di quelle correzioni (per quanto posso vedere) e ancora non vi è alcuna spaziatura tra i blocchi in linea se si controlla il codice sorgente. Giusto per mostrarvi il problema che ho per lo più: ecco un breve violino: 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; 
    } 

Probabilmente sapete che, ma la larghezza 33,3% non funziona , a causa di questa spaziatura. I sistemi di grid non sembrano avere questo problema, sebbene stia usando anche "display: inline-block". Quindi la mia domanda: in che modo CSS Wizardy ha risolto questo problema? Non riesco a capirlo e cambiare HTML (vedi il link Trucchi CSS sopra) in realtà non funziona molto spesso, a causa del contenuto generato da CMS o altro, in cui non puoi adattare il tuo HTML.

Grazie in anticipo per il vostro aiuto.

Answer 1

Demo da Csswizardry vi siete collegati utilizza commento HTML mod:

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

controllare la loro fonte demo.

aggiornato anche il tuo jsfiddle

Answer 2

Se non è possibile modificare il codice HTML, dovrete dare il contenitore font-size: 0 e ripristinare la font-size nelle colonne o dare le colonne margini negativi (può essere fastidioso).

Maggiori dettagli: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 3

Si potrebbe fare la seguente:

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

E sulla voce di bambino resettare il word-spacing

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

È possibile checkout this violino.

Non sono sicuro se questa è la tecnica migliore ma sembra funzionare piuttosto bene.

Answer 4

Flexbox risolve questo problema al giorno d'oggi.

Si potrebbe fare la seguente invece:

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

E che dovrebbe risolvere i problemi di spaziatura.