Cross-browser height and line-height

Updated . Posted . Visible to the public.

When using an odd value for line-height in CSS the result will vary across all major browsers.\
Use an even line-height whenever possible.


When you are styling block elements you often apply both height and line-height to them. This Sass Show archive.org snapshot mixin helps you out with odd heights by always setting an even line height:

=height($height)
  height: $height
  line-height: floor($height / 2) * 2

So when you call +height(19px) in Sass this will be the resulting CSS:

height: 19px
line-height: 18px
Profile picture of Arne Hartherz
Arne Hartherz
Last edit
Dominik Schöler
License
Source code in this card is licensed under the MIT License.
Posted by Arne Hartherz to makandra dev (2010-11-18 13:10)