html - Varying line-height and font-size causing gaps in inline-block elements -

html - Varying line-height and font-size causing gaps in inline-block elements -

i'm putting simple navigation bar together. wanted of links centered vertically, used next css, did needed:

.link { display: inline-block; line-height: 3em; height: 3em; }

i wanted of links in larger font size. did setting line-height , font-size property differently on each element, made sure line height calculated 3em respective parent:

.link1 { display: inline-block; font-size: 1.5em; line-height: 2em; } .link2 { display: inline-block; font-size: 2em; line-height: 1.5em; }

in doing this, noticed there little bands above , below elements elements beingness vertically offset slightly.

i've created jsfiddle here demonstrate issue. suspect hack around issue float: left , clearfix, hear 'correct' way solve it.

to summarise, i'm trying accomplish here divs same height different font sizes, , text vertically centered.

thanks much help.

the line-heights of spans equal, default vertically aligning on baseline of text. since text vertically centred in spans, baseline of smaller text higher in span. when baselines aligned, tops of spans smaller font lower tops of other spans.

you can vertically centre spans using vertical-align: middle (or top or bottom, other default baseline) if don't mind text beingness vertically centred. gives you're looking for, although may seem smaller text "floating" little due the baselines not beingness aligned more.

(also note height properties having no effect on spans).

html css html5 css3