div标签中不需要的空间答案

【问题标题】：Unwanted Space in div tagsdiv标签中不需要的空间
【发布时间】：2014-01-29 07:10:19
【问题描述】：

我有两个 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>

【问题讨论】：

标签： css html web

【解决方案1】：

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

什么是基线？

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

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

垂直对齐

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

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

因此，可以将vertical-align属性设置为middle、top或bottom，只要图片元素大于当前行文本的line-height，就会下面没有多余的空间。

但是，您需要记住我刚才所说的关于 line-height 的内容。如果您的line-height 大于您的图像元素，vertical-align 将做的不仅仅是删除多余的间距：它实际上会相应地对齐行上的图像元素。 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 规则：

#header img {
    vertical-align: bottom; /* or top or middle */
}

显示为块级

另一种选择是将图像元素更改为显示为块级元素。除非您知道自己想要块级图像，否则我不推荐这种方法。

块级元素会自动填充到它们的容器中，并且不会与文本或其他内联元素内联。此外，如果您在图像上设置float，这将强制它为block 级别。

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

#header img {
    display: block;
}

或

#header img {
    float: left; /* You could float right too */
}

【讨论】：

或垂直对齐：顶部；原因是图像，因为内联框默认位于基线上，就像字母一样......猜猜，下面有一个间隙..
我不太清楚你的意思。我对此还是很陌生。我会在 html 文档或外部样式表中这样做吗？
我将 Vertical-align: bottom 添加到我的#header，但这并没有解决问题。 #header { 文本对齐：居中；填充：0px；边距：0px；垂直对齐：底部； }
@user3246575 您需要将其应用于图像元素，而不是#header。试试#header img { vertical-align: bottom; }。理想情况下，您应该给图像元素一个特定的类，否则#header 中的所有图像都将垂直对齐设置为底部。
这很好@GCyrillus 它实际上默认为inline，而不是inline-block。无论哪种方式，它都会遇到同样的问题。