Jak vyřešit mezeru mezi inline-block elementy?

Pokud máte 4 bloky, které jsou 25% široké a jsou "display: inline-block;", tak se Vám vedle sebe nevejdou. Určitě se ptáte proč, vždyť 4*25 = 100, což sedí. Pokud by byly prvky "float: left;", tak to funguje. Co je tedy tak jiné na "display: inline-block;"?

"display: inline-block;" tvoří sám od sebe mezi bloky mezeru v řádu jednotek pixelů. Tudíž pokud máme zmińované 4 prvky s šířkou 25%, tak výsledek není 4*25 a tedy 100%, ale (4*25)+3*šířka_mezery_mezi_bloky = 100%+ty mezery tudíž více jak 100% => 4 element nám jde na další řádek.

Existuje několik rad, jak tento problém vyřšit:

1) Odstraňte mezery v kódu
Na tento návod stačí pokud "minifikujete" svůj html kód. Po této operaci mezery vymizí a "display: inline-block;" funguje jak očekáváte.
Pokud kód "neminifikujete", tak pomůže úprava struktury kódu. Například takto:

  

   one

   two

   three


//nebo


  
one
two
three


//nebo


  
one
two
three

Řešení to není zrovna krásné, pro člověka neznalého tohoto "fixu" působí možná až směšně či nečitelně, ale "účel světí prostředky".

2) Záporný "margin"
Často bývá mezera asi 4px. Její velikost závisí na velikosti písma. Tudíž přesnou hodnotu je třeba zkusit. Řešení je problematické pro IE6 a IE7, ale v současné době to až takový problém není.

nav a {
  display: inline-block;
  margin-right: -4px;
}

3) Nastavte "font-size" na 0
Jak bylo zmíněno, tak mezera mezi bloky závisí na velikosti fontu. Pokud bude font nulový, tak i mezera bude nulová.

nav {
  font-size: 0;
}
nav a {
  font-size: 16px;
}

Toto řešení má problémy na některých Android zařízeních (hlavně Jellybean), kdy mezeru úplně neodstraní. Dále pokud nastavujete font pomocí "@font-face", tak daný font strácí po použití "techniky nulového písma" anti-aliasing v Safari 5.0.x .

<< zpět