Html div底部的随机5px空间

我有以下代码：

HTML

<div id="overview">
    <div id="banner">
        <img src="http://www.placehold.it/1200x600"/>
        <div id="info">
            <div id="identity">
                <span id="name">Name</span><br/>
                <span id="title">Title of Name g</span>
            </div>
        </div>
    </div>
</div>

除了Chrome之外，我还没有在任何浏览器中测试过这一点，但是在

横幅的高度上增加了一个额外的5px。当剥离样式和元素，使其仅为图像和包含的
横幅
时，间隙仍然存在。我在
标题
中加入了一个g，以说明这是如何产生问题的

起初，我认为这是由于内联元素的性质和W浏览器将代码中的换行符/制表符视为空白。然而，当把它浓缩成一条线时，问题依然存在

有人能解释一下发生了什么，以及如何修复吗？
将图像设置为块或内联块元素：

#banner > img {
    width:100%;
    display: block;
}

见：

默认情况下，图像是内联元素，其底边位于基线上。基线下方有少量的空间（前导），以便为某些字母（如“y”或“j”）的下行字母留出空间


*{
框大小：边框框；
}
#横幅{
宽度：100%；
位置：相对位置；
边框：1px蓝色虚线；
}
#横幅>img{
宽度：100%；
显示：块；
}
#信息{
位置：绝对位置；
底部：0；
宽度：100%；
文本对齐：居中；
边框：1px点蓝色；
}
#身份{
显示：内联块；
文本对齐：左对齐；
}
#名字{
字号：2em；
字体大小：粗体；
}
#头衔{
字号：1em；
字体大小：粗体；
}

名称


姓名g的标题
此问题是由于
img
布局造成的，类似于
内联
，您可以将其更改为
块
，以解决此问题：

#banner>img{
宽度：100%；
显示：块；
}


或者您也可以将
img
默认垂直对齐从
baseline
更改为
top
，抑制顶部缩进：

 #banner > img {
  width:100%;
  vertical-align:top;
}

谢谢！规范中有什么细节可以解释为什么会这样吗？当我有能力的时候，我会接受这个答案。
 #banner > img {
  width:100%;
  vertical-align:top;
}