Question

我有两个div id。一个人有一个图像，另一个有背景图像。这两个div之间有一个不需要的空间。在Dreamweaver设计视图中，它看起来好像没有空间，但如果我将其设置为实时或在浏览器中预览，则会再次出现空格。

这是div的css

#header {
text-align: center;
padding: 0px;
margin: 0px;
}

#content {
    background-image:url(img/ContentBox.png);
    background-repeat: no-repeat;
    background-position:center;
    padding: 0;
    margin: 0;
}

这是我的身体html（忽略多个换行符，这只是我可以看到div中的bg img）

<body>

<div id="header"><img src="img/Header.jpg" /></div>
<div id="content"><br><br><br><br><br><br><br></div>


</body>

Answer 1

图片的默认显示设置为inline。这使它们与文本内联流动，与基线垂直对齐。默认情况下，所有文本都与基线垂直对齐，除非您通过将vertical-align设置为其包含元素上的其他内容来更改它。

什么是基线？

基线漂浮在实际线的底部之上。查看小写字母g。顶部圆圈的底部是基线。这就是图像对齐的地方。

你可以通过多种方式解决这个问题，但这里有几个：

垂直对齐

同样，默认情况下，图像元素设置为display: inline。假设您不想更改此设置，则需要调整图像元素在当前文本行上垂直对齐的方式。

vertical-align CSS属性设置当前文本行上的内联元素的垂直对齐方式。 它不会相对于容器设置它。

因此，您可以将vertical-align属性设置为middle，top或bottom，并且只要图片元素大于{{1}当前文本行，它下面没有额外的空格。

但是，你需要记住我刚才所说的关于line-height的内容。如果您的line-height大于图片元素，line-height除了删除额外的间距外，还会做更多的事情：它会相应地对齐线上的图像元素。 See this jsFiddle to see an example of how a line-height greater than the height of the image will affect the result.

因此，根据您提供的HTML，设置垂直对齐方式，您可以执行以下CSS规则：

vertical-align

显示为块级

另一种选择是将图像元素更改为显示为块级元素。除非您知道需要块级图像，否则我不建议使用此方法。

块级元素会自动填充到其容器中，并且不会与文本或其他内联元素内联。另外，如果您在图片上设置#header img { vertical-align: bottom; /* or top or middle */ }，则会强制它为float级别。

因此，您有两个选项可以显示为块级别：

block

或

#header img {
    display: block;
}

div标签中不需要的空间

1 个答案:

什么是基线？

垂直对齐

显示为块级