Question

我目前正在学习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>

和一个非常简单的CSS：

body
{
    margin: 0;
    padding: 0;
}
menu
{
    padding: 0;
    margin: 0;
    background: green;
}
ul
{
    padding: 0;
    margin: 0;
}
li
{
    display: inline;
}
img
{
    padding: 0;
    margin: 0;
}
.imagecontainer
{
    background: yellow;
    padding: 0;
    margin: 0;
}

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

我注意到，当我将font-size设置为0时，保证金会消失。有人能从概念上解释从css / boxmodel角度看是怎么回事吗？似乎浏览器在图像下面添加了一个空白文本行或者......

enter image description here

Answer 1

将display: block;添加到您的图片

img {
    display: block;
}

空白区域是由于图像是inline元素。我认为这相当于line-height，它会在文本周围添加空白区域。

Answer 2

这是因为所有内联元素都应该适合span标签的'contains text'模型，其中空格是为g，q，j等字母的尾部保留的。

如果为非，则此内部空间用于内联级别元素上的默认浏览器设置的“链接下划线”。意思是，它为链接悬停下划线保留了空间。

tail（n：tel）

在一封信中，延伸到基线以下的部分对，就像gjqy一样。在大写字母中，Q和R有尾巴它们不需要延伸到基线以下。

Answer 3

确实，添加“display：block;”你的img规则会让问题消失。这很可能是由于默认情况下图像被视为“内联”或“内联块”。因此，浏览器很可能会尝试将图像处理为父元素的行高。

为什么这个div会在底部留下余量

3 个答案: