Почему блоки по высоте занимаю больше места, чем их содержимое?

Question

[The_XXI]

Есть контейнер с тремя блоками (каждый из блоков имеет цветной фон для наглядности) и в каждый блок вставлена картинка. Почему блок во высоте больше этих картинок? (размеры у картинок одинаковые)

<div class="types_list">
                    <div class="types_list_block" style="background-color: red;">
                        <img src="./images/type1.jpg" alt="First type of repair">
                    </div>
                    <div class="types_list_block" style="background-color: blue;">
                        <img src="./images/type2.jpg" alt="Second type of repair">
                    </div>
                    <div class="types_list_block" style="background-color: green">
                        <img src="./images/type3.jpg" alt="Third type of repair">
                    </div>
                </div>

.types_list {
        margin: 0 auto;
        width: 1236px;
        display: flex;
        justify-content: space-between;
        background-color: #FFFFA0;
    }

Вот скрин

Comments

[Ankhena]

Потому что это пробел после инлайновых элементов.
Задайте картинкам либо block либо inline-block в сочетании с vartical-align (например, top)

[The_XXI]

Ankhena, спасибо