HTML / CSS - откуда пробел после изображения? Как его убрать?

Доброго времени суток
Столкнулся с проблемой, что откуда-то взялся отступ после изображения. Дальше должна идти текстовая информация <h2> <hr/> <p>, они уже идут без таких отступов между собой. Если добавить ещё изображения, будут ещё отступы.

По структуре - на всю ширину страницы центральное меню (.CenterMenu). В этом меню блок статей (.articles). В блоке статей три статьи (article), по одной из которых пример кода HTML.

Добавил два изображения. На первом видно визуализацию элемента с проблемой. На втором - используемое изображение. В самом изображении нет белой полоски снизу - границы определены чёрной рамкой

Код HTML:

<div class="articles">
<article>
<img src="img/Example.png" alt="Logo" id="Logo"/>
<img src="img/Example.png" alt="Logo" id="Logo"/>
</article>
</div>

Код CSS:

.CenterMenu {
position:relative;
margin-top: 1%;
float: left;
width: 100%;
}

.CenterMenu .articles {
background-color: blue;
float: left;
width: 60%;
margin-left: 20%;
}

.CenterMenu .articles article {
float: left;
width: 32.3333%;
border: 0.1vh solid silver;
box-sizing: border-box;
border-radius: 3%;
background-color: #fafafa;
margin-right: 0.5%;
margin-left: 0.5%;
min-height: 450px;
position: relative;
}

.CenterMenu .articles article img {
width: 100%;
border-radius: 3% 3% 0 0;
padding: 0;
margin: 0;
}