Какая пустая часть моего макета?

Question

#container { 
 
    width: 250px; 
 
    margin: 0 auto; 
 
} 
 

 
.group { 
 
    border: 1px solid grey; 
 
    margin-bottom: 20px; 
 
} 
 

 
.group p { 
 
    text-align: center; 
 
    font-family: Helvetica sans-serif; 
 
    font-size: 25px; 
 
    color: #2e3d49; 
 
} 
 

 
.group img{ 
 
    width: 100%; 
 
}

<div id="container"> 
 
    <div class="group"> 
 
    <p>Hello World</p> 
 
    <img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg"> 
 
    </div> 
 
</div>

Пожалуйста, нажмите на кнопку "Выполнить фрагмента кода", чтобы увидеть результат. Вы можете видеть внизу изображения, есть пустая часть. Откуда это происходит?

Answer 1

это img быть встроенный элемент, поэтому установлен как display:block или потому, что по умолчанию vertical-align:baseline, вы можете установить набор vertical-align:bottom

#container { 
 
    width: 250px; 
 
    margin: 0 auto; 
 
} 
 
.group { 
 
    border: 1px solid grey; 
 
    margin-bottom: 20px; 
 
} 
 
.group p { 
 
    text-align: center; 
 
    font-family: Helvetica sans-serif; 
 
    font-size: 25px; 
 
    color: #2e3d49; 
 
} 
 
.group img { 
 
    width: 100%; 
 
    display: block; 
 
    /* vertical-align: bottom - would work as well */ 
 
}

<div id="container"> 
 
    <div class="group"> 
 
    <p>Hello World</p> 
 
    <img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg"> 
 
    </div> 
 
</div>