Read more

Mysterious "margin" below an image

Dominik Schöler
May 31, 2012Software engineer at makandra GmbH

Consider the following HTML & CSS:

<div><img src='http://makandra.com/images/makandra-ruby-on-rails.png' /></div>
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

^
img {
background-color: red;
}
div {
border: 1px solid black;
}

This will leave a margin of about 5px between the lower edge of the image and the containing div, although there are no paddings or margins set, and there's no whitespace. The reason is, the image will vertically align baseline, and the space below the image is just kept for descenders (the part of letters below the baseline).

Fix it by either giving the image a vertical-align: middle or display: block, which in most cases should be what you want.

Posted by Dominik Schöler to makandra dev (2012-05-31 09:01)