Tenho o seguinte HTML puro, sem CSS
<div>
<img src="_img/_banner/banner1.jpg" />
</div>
A imagem banner1.jpg possui 300px
de altura e à div
não foram estabelecidas dimensões.
Olhando no inspector
para a imagem
temos:
Olhando no inspector
para a div
temos:
Nota-se que, embora no inspector não haja borders
, paddings
, margins
, nada para a imagem, ela está de alguma maneira aumentando a altura da div
para 304px
.
Gostaria de entender o porquê disso, sendo que que não há medidas extras atreladas nem à img
nem à div
.
Sei que aplicar display:block
à imagem, resolve o problema, mas não consigo entender porquê!