Html 为什么li的尺寸比li包裹的图像的尺寸高？

我正在制作一个带有文字的小册子列表，解释它们是什么，显示在小册子图像的顶部。 一切都很好。只是由于某种原因，宣传册的图像在高度上比绝对位于上面的div要小。正如您在JSFIDLE中看到的，包含文本的ul被设置为100%的高度。由于某种原因，ul的文字超出了图像的高度。我希望它自动设置与图像相同的高度。没有空白，没有空白。我只是不明白它为什么这么做。正如你所看到的那样，包裹图像的li在高度上也比图像要大。非常感谢你的帮助，谢谢！ CSS:

HTML:

---

以下是JSFIDLE链接：

此问题是由于

img

布局：

img {
   display:block;
}

---

尝试删除img和a标签之间的空白。您添加了一个（尽管不存在）中断。在设置样式时，这有时会引发意外问题。使用嵌套UL而不是DIV作为文本有什么特殊原因吗？当然它会更简单、更健壮——或者我是不是太胖了？@JulianKnight事实上，像这样的

中的纯文本是无效的HTML，唯一允许
的内容是零或更多的
。是的，我知道，这就是我问的原因，我想我可能错过了一些聪明的东西；）哦，哇！非常感谢你！你能解释一下为什么这真的有效吗？再次感谢你@TekHelpDotOrg：将img的默认布局（类似于内联块）更改为块将强制浏览器以另一种方式计算元素大小。详细信息可以找到。@TekHelpDotOrg:如果我的帖子解决了你的问题，请标记为已回答。
<div id="brochures">
     <ul>
         <li><a href="#" >
             <img src="http://0.tqn.com/d/office/1/0/i/4/-/-/Publisher-2013.png" />
             <ul>Example Text</ul>
             </a>
         </li>
     </ul>
</div>

img {
   display:block;
}