inline-block vs float

Wat is het verschil precies tussen een element display inline-block of een float te geven? Optisch gezien weinig. 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.

Opdracht

Maak in 1 HTML pagina twee horizontale menu’s onder elkaar. Geef in het ene menu de list elementen de eigenschap inline-block en in het andere menu float left. Geef dan aan wat heeft jouw voorkeur heeft: float of inline? (plaats je tekst gewoon in je HTML document).

Theorie

Hieronder een stukje uitleg over het inline-block positioneren. In deze tutorial wordt er vanuit gegaan dat je voldoende kennis over floaten hebt.

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

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

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.