Из-за чего появляется зазор между контейнером и изображением?

Question

[Дмитрий]

<div class="widecontainer"><img alt="" src="/data/uploads/titleimg/color.webp"></div>

* {
    margin: 0;
    padding: 0;
    font-family: 'Tahoma';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    text-decoration: none;
    position: relative;
} 

 .widecontainer, .widecontainer img {
    width: 100%;
    height: auto;
}

красная полоска под изображением на примере https://codepen.io/demon416/pen/LYqqLdY

Answer 1

[IvanU7n]

у img по умолчанию display равен inline

Comments

[Дмитрий]

не понимаю какое именно свойство inline элемента гадит, но установка display:block помогла

[IvanU7n]

Дмитрий, сам глубоко не вникал, т.к. display: block всегда помогает, но вроде как vertical-align по умолчаниюbaseline, поэтому и пустое пространство снизу

[Сергей delphinpro]

Дмитрий, IvanU7n, Изучайте вопрос Инлайновый контекст форматирования