2

我目前正在学习 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 的角度从概念上解释发生了什么吗？好像浏览器正在图像下方添加一个空白文本行或其他东西......

在此处输入图像描述

4

3 回答 3

2

添加display: block;到您的图像

img {
    display: block;
}

空白是由于图像是一个inline元素。我想这相当于line-height在文本周围添加空白。

于 2013-04-25T20:45:48.470 回答
1

这是因为所有内联元素都应该适合跨度标签的“包含文本”模型，其中空间是为 g、q、j 等字母的尾部保留的。

如果不是，则此额外空间将在默认浏览器设置中用于内联级元素的“链接下划线”。意思是，它为链接悬停下划线保留空间。

尾巴（名词：电话）

字母中，延伸到基线下方并向右的部分，如 gjqy。在大写字母中，Q 和 R 有尾巴，尽管它们不必延伸到基线以下。

于 2013-04-25T20:56:55.390 回答
0

确实，添加“显示：块；” 到您的 img 规则将使问题消失。这很可能是由于默认情况下图像被视为“内联”或“内联块”。因此，浏览器很可能会尝试将您的图像放入父元素的行高中。

于 2013-04-25T20:51:02.253 回答