Layout 为什么这个div在底部留有余量_Layout_Html_Css

Layout 为什么这个div在底部留有余量

layout html css

Layout 为什么这个div在底部留有余量,layout,html,css,Layout,Html,Css,我目前正在学习CSS，似乎我很难理解盒子模型。我有一个非常简单的页面布局： <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="css/simpleimagebrowser.css"> </head> <body> <menu type="toolbar"> <u

我目前正在学习CSS，似乎我很难理解盒子模型。我有一个非常简单的页面布局：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="css/simpleimagebrowser.css">
</head>
<body>
<menu type="toolbar">
    <ul>
        <li>prev</li>
        <li>next</li>
    </ul>
</menu>
<div class="imagecontainer">
    <img src="images/awsome.jpg">
</div>

</body>
</html>

为什么我的黄色
底部有这么小的边距或间隙？

我注意到，当我将

字体大小设置为0
时，边距消失了。有人能从css/boxmodel的角度从概念上解释发生了什么吗？似乎浏览器正在图像下方添加一个空白文本行或其他内容
添加显示：块到您的图像
img {
    display: block;
}

空白是由于图像是一个内联元素造成的。我想这相当于行高
，它在文本周围添加了空格。
事实上，在img规则中添加“display:block；”将解决问题。这很可能是由于默认情况下图像被视为“内联”或“内联块”。因此，浏览器很可能试图将您的图像处理到父元素的线条高度。
这是因为所有内联元素都应符合span标记的“包含文本”模型，其中为字母g、q、j等的尾部保留了空间
如果不是，则默认情况下，此额外空间用于内联级别元素的“链接下划线”浏览器设置。也就是说，它为链接悬停下划线保留了空间
tail（n:tel）
在字母中，延伸到基线以下并延伸到基线的部分
对,作为gjqy。不过，在大写字母中，Q和R有尾巴
它们不需要延伸到基线以下
不确定这是否与此有关，但您没有关闭img标签。我认为在html5中，这是没有必要的：你有没有试过将你的身体或图像容器（无论包含哪个黄色）的高度设置为100%？这不是重复的，我不是在问如何摆脱它（正如我提到的，我现在已经有了一个解决方案），我要求解释为什么会发生这种情况：是的，但是为什么内联元素下有额外的空间？你花了太长时间接受修改，我自己发布了答案。这个“链接下划线”是否有特殊的CSS属性，这样我就可以关闭它？
img {
    display: block;
}