Высота div больше изображения

Question

Я новичок для разработки интерфейса. Недавно я писал коды, как:

<div style="background-color:red"> 
 
     <img src='https://www.logaster.com/blog/wp-content/uploads/2013/06/jpg.png'> 
 
</div>

Высота изображения (logo.jpg) является 80px, но высота DIV является 82px. Зачем?

Answer 1

Вы можете показать изображение как блок, чтобы исправить это,

<div> 
    <img style="display:block" src='logo.jpg'> 
</div> 

Answer 2

<div style="height:your height; width:your witdh;"> 

<img src='logo.jpg'> 

</div> 

Чтобы изменить высоту или ширину, вы можете делать то, что я сделал выше, с встроенным стилем. или дать div классу или дать div id и стилизовать его во внешней таблице стилей.

Answer 3

Для этого вам нужно написать правильный css.

<div class="wrap"> 
    <div class="box1"> 
    <img src="http://www.placekitten.com/500/500"> 
    </div> 
</div> 

.box1 { 
width:auto; 
height: auto; 
max-width: 600px; 
max-height: 300px; 
background-color:chocolate; 
padding:5px; 
display: inline-block; 
} 
.box1 img { 
vertical-align: top; 
max-width: inherit; 
max-height: inherit; 
} 
.wrap { 
border: 1px dotted gray; 
margin: 1.00em 0; 
text-align: center; 
} 

JsFiddle: https://jsfiddle.net/nikdtu/75nu1a4m/