html - 为什么 li 的尺寸在高度上比 li 包裹的图像尺寸大？

Question

我正在制作一个带有文字的小册子列表，解释它们是什么，显示在小册子图像的顶部。一切都很好。只是由于某种原因，小册子的图像在高度上比绝对位于其顶部的 div 小。正如您在 jsfiddle 中看到的，具有文本的 ul 设置为 100% 的高度。好吧，出于某种原因，带有文本的 ul 超出了图像的高度。我希望它自动设置与图像相同的高度。没有填充，没有边距。我似乎无法理解为什么要这样做。另外，正如您所看到的，包裹图像的 li 的高度也比图像高。感谢您的帮助，谢谢!CSS:

img{
    padding:0;
    margin:0;
}
#brochures > ul{
    list-style:none;
    padding:0;
    margin:0;
}
#brochures li{
    display:inline-block;
    margin: 0;
}
#brochures ul li a{
    position:relative;
    display:block;
}
#brochures > ul ul{
    text-align:center;
    color:white;
    background-color:rgba(0,0,0,0.6);   
    position:absolute;
    height:100%;
    width:100%;
    top:0;
    left:0;
    padding:0;
    margin:0;
}

HTML:

<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>

这是 jsfiddle 链接:http://jsfiddle.net/W76pw/1/

Answer 1

此问题是由于 img 布局造成的:

img {
   display:block;
}

Example