Лишний отступ внизу блока, содержащего img

#html #css

CSS

main div.image {
    display: block;
    width: 100%;
}

main div.image img {
    width: 100%;
    height: auto;
}


HTML


  



Проблема в том, что этот код (да даже без любого CSS, просто картинка в другом теге)
добавляют дополнительное пространство снизу родительского блока.



Вы можете заметить, что сама картинка уже "закончилась", но родительскому блоку все
равно снизу добавляется некоторое свободное пространство. С чем это связано и как от
этого избавиться - вопрос. Хотя, может быть, это нормально и добавляется вне зависимости
от моего желания, прямо как margin'ы у p. Хотя от них можно избавиться.
    

Ответы

Ответ 1

Картинка, по умолчанию, отображается как строковый элемент, на который влияет высота
строки. Именно высота строки ответственна за расстояние между div и img.

Решения два: 


Обнулить высоту строки для обертки.
Сделать картинку блочным элементом.




.holder {
  border: 1px solid lime;
  outline: 1px solid #000;
  width: 100px;
}
.fix-1 {
  line-height: 0;
}
.fix-2 img {
  display: block;
}

  

    
  
  

    
  



Ответ 2

main div.image img {
    width: 100%;
    height: auto;
}



Можно добавить

vertical-align: top;


либо использовать

display: block;


Ответ 3

добавте в стили к картинке display: block; - такое поведение изначально изза того
что картинка по умолчанию инлаин 

main div.image img {
   display: block;
   width: 100%;
   height: auto;
}