Verticale verschuiving bij vertical align middle

[gnoe93]

Bij het verticaal centreren van een afbeelding naast een stuk tekst valt mij op dat de gecentreerde elementen naar onder schuiven waardoor de container bovenaan extra witruimte krijgt.

https://jsfiddle.net/k4q2nvwm/

In bovenstaand voorbeeld is duidelijk te zien dat de container 49px wordt, ook al zijn beiden de hoogte van de afbeelding en de line height 48px. Waar komt deze extra pixel vandaan? Hoe kan ik er voor zorgen dat de container dezelfde hoogte heeft?

Indien de afbeelding groter of gelijk is dan de line-height, is dit op te lossen door "vertical-align: top" te doen, maar hier is mijn probleem voor kleinere afbeeldingen niet opgelost.

[Ventieldopje]

Veel voorkomend probleem, met een beetje googlen had je dit wel gevonden

font-size: 0; op de div lost het op. Wel even font-size: 16px (of wat dan ook) op je span doen, die inherit namelijk zijn font-size en zal dan op 0 komen te staan en is je tekst weg.

[gnoe93]

Ventieldopje schreef op vrijdag 14 oktober 2016 @ 22:48:
Veel voorkomend probleem, met een beetje googlen had je dit wel gevonden

font-size: 0; op de div lost het op. Wel even font-size: 16px (of wat dan ook) op je span doen, die inherit namelijk zijn font-size en zal dan op 0 komen te staan en is je tekst weg.

Ik weet dat bij inline elementen de whitespace door de font size ook een grootte krijgt, maar ik dacht dat dit enkel horizontaal was? De elementen staan tenslotte ook naast elkaar. Vanwaar komt die verticale whitespace dan eens? Is dit eigen aan de werking van vertical align?

[ Voor 3% gewijzigd door gnoe93 op 14-10-2016 23:47 ]

[Ventieldopje]

gnoe93 schreef op vrijdag 14 oktober 2016 @ 23:47:
[...]


Ik weet dat bij inline elementen de whitespace door de font size ook een grootte krijgt, maar ik dacht dat dit enkel horizontaal was? De elementen staan tenslotte ook naast elkaar. Vanwaar komt die verticale whitespace dan eens? Is dit eigen aan de werking van vertical align?

Zoals ik al zei, hier is tonnen aan informatie over te vinden op het internet: https://mor10.com/removin...line-elements-descenders/

[gnoe93]

Ventieldopje schreef op vrijdag 14 oktober 2016 @ 23:53:
[...]


Zoals ik al zei, hier is tonnen aan informatie over te vinden op het internet: https://mor10.com/removin...line-elements-descenders/

Ik moet naar het verkeerde hebben zitten zoeken dan . Juist nog één vraagje dat ik niet direct kan terugvinden. Heb je enig idee waarom stokletters geen invloed hebben bij "vertical align: top"?

[Ventieldopje]

gnoe93 schreef op zaterdag 15 oktober 2016 @ 01:28:
[...]


Ik moet naar het verkeerde hebben zitten zoeken dan . Juist nog één vraagje dat ik niet direct kan terugvinden. Heb je enig idee waarom stokletters geen invloed hebben bij "vertical align: top"?

Poeh, nee Vast iemand hier die dat helemaal uitgezocht heeft een keer. Ik heb er doorgaans geen tijd voor, ik weet er verschillende oplossingen voor zodat ik door kan met m'n werk. Met CSS een "waarom" zoeken is vaak een heel gedoe, zeker omdat het per browser zo verschilt.