img в блоке

Убрать нижний отступ в блоке с картинкой.

by akogch

HTML

<div class="img">
  <img
    src="https://habrastorage.org/r/w1560/webt/to/cr/o1/tocro1luku9caqtlqptb22zhr-u.png"
    alt=""
  />
</div>

CSS

.img {
  border: 1px solid #000; 
  width: 500px;
  height: 200px;
  /* font-size: 1px; */
  /* line-height: 0; */
  /* height: 200px; */
  /*Здесь работает любым из 3 способов*/
}

img {
  width: 500px;
  height: 200px;
  display: block;
  /* vertical-align: middle; */
  /* Здесь может быть и "top" и "middle", работает и так и так, почему не знаю. */
}