Inline-block a bílé znaky
Při zadávání šířky elementům s display: inline-block je nutné myslet na bílé znaky (whitespace).
Mějme jednoduchý cíl: umístit do řádku 3 odkazy, každý 100 px široký s 5px mezerou mezi nimi. Výsledná celková šířka by proto měla být 310 px (šířka: 3 * 100 px + odsazení: 2 * 5 px).
Proč se to tedy do obalu o šířce 310 pixelů ↑ nevejde a třetí odkaz odskočí na další řádek?
Na vině jsou mezery/odřádkování mezi jednotlivými odkazy (samostatná ukázka).
<a href="#">Odkaz</a> <a href="#">Odkaz</a>Řešení
První možnost je v HTML kódu mezery odstranit (ukázka):
<a href="#">Odkaz</a><a href="#">Odkaz</a>Případně pro lepší přehlednost posunout koncovou značku (ukázka).
<a href="#">Odkaz</a
><a href="#">Odkaz</a>Nebo zakomentovat (ukázka). Moc elegantní se mi to ale nezdá.
<a href="#">Odkaz</a><!--
--><a href="#">Odkaz</a>Ještě je možné se mezer zbavit nulovou velikostí písma (font-size: 0) pro rodiče a následným obnovením velikosti pro položky s inline-block (ukázka). Není to ale úplně spolehlivé a nenávratně se tím rozhodí relativní velikosti písma.
Jinak se nabízí na inline-block resignovat a použít:
Co si myslíte o tomto článku?
Diskuse
Související články
CSS Anchor Positioning – posicování elementů relativně k jiným
Jak pomocí anchor-name, position-anchor a funkce anchor() posicovat elementy relativně k jiným bez JavaScriptu.
Centrování na webových stránkách
Moderní způsoby vertikálního i horizontálního centrování v CSS. Flexbox, Grid, margin auto a další techniky.
CSS Stacking Context – jak funguje vrstvení elementů a z-index
Jak stacking context v CSS ovlivňuje z-index, co vytváří nový kontext vrstvení a jak řešit problémy s překrýváním elementů.
Kapitálky – CSS small caps a verzálky
Co jsou kapitálky (small caps), jak se liší od verzálek a jak je použít v CSS pomocí font-variant a text-transform.