Question

我正在尝试编写一个简单的东西：div中的图像，它们的边界之间没有空格但不知何故我总是得到一个底部边距（或填充取决于你想看到它的方式）。我尝试将margin和padding设置为0，但它不会改变任何内容。

以下是代码：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
    <head>
        <meta charset="utf-8"/>
        <title>Sandbox</title>
        <style>
            *{margin:0;padding:0;}
            div{
                background:red;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="image.jpg"/>
        </div>
    </body>
</html>

我已经试过两个浏览器（Chrome，Maxthon）没有运气。它是在规范中还是所有的Web浏览器都搞乱了？

Answer 1

将<img />显示为块级元素：

div > img {
    display: block;
}

jsFiddle Demo

Answer 2

问题和解决方案：

原因是因为内联元素（如图像）自动对齐到父框的基线，除非由vertical-align属性修改。如果您设置块级元素以显示为inline-block，您也会经常遇到此问题。要解决此问题，请将图像与div的顶部或底部对齐，如下所示：

img {
    vertical-align: top;
}

了解基线：

在考虑文本时，基线很容易理解。诸如 abcdefhiklmnorstuvwxz 等字母都在基线上。但是，在这条线下有处理超过基线的字母的空间。所有其他字母也位于基线上，但字母的一部分延伸到基线以下。其中包括字母： gjpqy 。由于内联元素（包括图像）默认位于基线上，除非您修改垂直对齐，否则它们下面会有额外的空间。

使用图像时div中的不可移动的下边距

2 个答案: