Read more

Cross-browser height and line-height

Arne Hartherz
November 18, 2010Software engineer at makandra GmbH

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.


Illustration online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
Read more Show archive.org snapshot

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
Posted by Arne Hartherz to makandra dev (2010-11-18 14:10)