Child selectoren

inline-block vs float

HTML elementen naast elkaar plaatsen kan op verschillende manieren. In deze korte tut wil ik float en inline-block bespreken. Optisch gezien is er weinig verschil tussen beiden. In beide gevallen komen de elementen naast elkaar te staan. Qua gedrag in de code is er wel een verschil.

Floating elementen worden uit het stramien gehaald. Een parent container ‘ziet’ deze elementen niet meer waardoor de parent een hoogte van nul krijgt. Inline-block elementen blijven gewoon zichtbaar voor de parent.

Letter-spacing en inline-block

Inline-block elementen worden net als tekst geformatteerd. Zij krijgen een klein beetje witruimte rechts net als letter-spacing. Dit scheelt ongeveer 4 pixels en uiteraard heeft dit consequenties voor je ontwerp. Immers, objecten komen dan toch nog onder elkaar te staan ipv naast elkaar wanneer er geen ruimte meer is.

Oplossing:

Er zijn een aantal oplossingen. Zie https://css-tricks.com/fighting-the-space-between-inline-block-elements/ voor het volledige artikel.

 

1. Verwijder overbodige witruimte in je HTML code.

Dit is denk ik de makkelijkste oplossing. Zorg er voor dat in je HTML geen extra zaken staan die voor witruimte kunnen zorgen (zoals een enter omdat je je HTML op een andere regel zet).

Bijvoorbeeld
<ul>
<li>menu item 1</li><li>menu item 2</li><li>menu item 3</li>
</ul>

 

Echter, dit maakt je code onoverzichtelijk bij lange lijsten. Je kunt het ook zo oplossen:
<ul>
<li>
menu item 1</li><li>
menu item 2</li><li>
menu item 3</li>
</ul>

 

Dit werkt dan overzichtelijker.

 

2. Font-size op nul zetten

Een andere oplossing kan zijn om in het parent element de font-size op nul (0) zetten. Dan kun je in het element zelf wel weer je font-size een waarde geven. Mocht je veel met inline-block elementen werken dan kun je zelfs overwegen om font-size:0 in je reset op te nemen.

Bijvoorbeeld
In je HTML:<section id=”lesmateriaal”>
<article>Artikel 1</article>
<article>Artikel 1</article>
</section>

 

In je CSS:
#lesmateriaal{
font-size:0;
}
article{
font-size:14px;
display:inline-block;
}

Uiteraard kun je gewoon met float werken maar dan moet je niet vergeten om clear:both te gebruiken om de footer weer te zien.