Morbi consequat mauris vitae leo. Ut egestas dui at odio. Proin a ligula nec mi posuere tincidunt. Suspendisse neque nulla, pharetra sit amet, convallis ut, dictum nec, augue. Nullam sed turpis. Sed tincidunt fermentum leo. Nulla est metus, venenatis sagittis, vulputate quis, hendrerit non, dui. Integer sollicitudin libero at wisi. Pellentesque quis est sed justo volutpat luctus. Donec pulvinar consectetuer enim. Praesent ut tellus. Aliquam tincidunt. Pellentesque laoreet, mauris sed tempus blandit, lacus turpis facilisis pede, vitae gravida mi imperdiet augue. Vivamus eget neque quis ipsum consequat porttitor.

inline and block elements with padding and border

[inline, block] * line-height:[normal, 1, 2]

FQgf
FQgf
FQgf
FQgf
FQgf
FQgf
 

line-height:[normal, 1, 2] * [inline, block]

FQgf
FQgf
FQgf
FQgf
FQgf
FQgf
 

different font-family (different heights)

inline

FQgf FQgf FQgf FQgf FQgf FQgf
offsetHeight:

block (almeno in Moz e Saf, con alcuni font, altezze diverse da inline)

FQgf
FQgf
FQgf
FQgf
FQgf
FQgf
offsetHeight:

block, line-height: 1.2 (same heights)

FQgf
FQgf
FQgf
FQgf
FQgf
FQgf
offsetHeight:

block, line-height: 0.5 (same heights)

FQgf
FQgf
FQgf
FQgf
FQgf
FQgf
offsetHeight:

like the above, but avoids IE “cropping”

FQgf
FQgf
FQgf
FQgf
FQgf
FQgf

like the above, with vertical-align:top (only IE/Win differs)

FQgf
FQgf
FQgf
FQgf
FQgf
FQgf

like the above, with vertical-align:bottom (only IE/Win differs)

FQgf
FQgf
FQgf
FQgf
FQgf
FQgf

Other similar font height tests

CSS tests home