Поясните глюк в простом html/css коде — почему блок больше чем картинка, в нем содержащаяся?

Question

[Emptyform]

Вот такой предельно простой код:

<style>
    * {
      margin: 0;
      padding: 0;
    }
    div {
      display: inline-block;
      background: red;
    }
	</style>

  <div>
    <img src="http://placehold.it/150x150" width="150">
  </div>

вот здесь посмотреть: cssdeck.com/labs/muhdt9ya

Почему DIV больше чем картинка?

Answer 1

[Андрей Федоров]

Известный глюк. Добавьте

img {
          vertical-align: bottom;
    }

Comments

[Emptyform]

Андрей Федоров охренеть. получается "vertical-align: bottom;" аннулирует дефолтный lign-height у div-а

[Андрей Федоров]

Он не анулирует. У блока есть вертикальное выравнивание - по умолчанию это baseline, а значит внизу каждой строки будет междустрочный интервал.

[Emptyform]

Андрей Федоров: ну, если div-у указать line-height: 0; то результат будет тем же.

[Андрей Федоров]

Будет, не могу вам однозначно посоветовать ни тот, ни другой способ. По честному я бы совсем отказался от тега img, а сделал бы изображение background'ом.

[Emptyform]

Андрей Федоров: как пользователь могу сказать, что меня всегда бесит, когда я не могу из контекстного меню сохранить понравившееся изображение и приходится открывать инструменты разработчика))

[Андрей Федоров]

Ну а как разработчик, вы хотите чтобы ваши картинки легко крали? )

[Emptyform]

Андрей Федоров: ну, поскольку способа защититься нет, то я полагаю, лучшая политика - открытость.

Answer 2

[Enniack]

У div есть line-height по дефолту

Comments

[Emptyform]

Enniack Блин, точно, помогло. В инструментах разработчика ни намека ни в Styles ни в Computed.
Спасибо!

Answer 3

[0leg5ergeev]

наитупейший вариант -

div{
    height: 150px;
}

Comments

[Emptyform]

Тоже вариант ))