div标签中不需要的空间

Question

I have two div id's. 我有两个div ID。 One has has an image in it and the other has a background image. 一个带有图像，另一个带有背景图像。 There is an unwanted space in between these two divs. 这两个div之间有多余的空间。 In the dreamweaver design view it appears as if there is no space, but if I make it live or preview in browser the space appears again. 在Dreamweaver设计视图中，好像没有空间，但是如果我将其激活或在浏览器中预览，则该空间会再次出现。

This is the css for the divs 这是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;
}

This is my body html (ignore the multiple line breaks, this is just so I can see the bg img in the div) 这是我的身体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

Images have a default display setting of inline . 图像的默认显示设置为inline 。 This causes them to flow inline with text, vertically-aligned with the baseline. 这将导致它们与文本在行内对齐，并与基线垂直对齐。 All text is vertically-aligned with the baseline by default as well, unless you change it by setting vertical-align to something else on its containing element. 默认情况下，所有文本都与基线垂直对齐，除非您通过将vertical-align设置为其包含元素上的其他内容来更改它。

What is baseline? 什么是基线？

The baseline floats above the bottom of the actual line. 基线浮动在实际行的底部上方。 Look at the lower-case letter g . 查看小写字母g 。 The bottom of the top circle is the baseline. 顶部圆圈的底部是基线。 That's where the images are getting aligned. 这就是图像对齐的地方。

You can solve this multiple ways, but here are a couple: 您可以通过多种方式解决此问题，但这有几个：

Vertical Alignment 垂直对齐

Again, image elements are set to display: inline by default. 同样，图像元素默认设置为display: inline 。 Assuming you don't want to change this, you need to adjust how the image element aligns vertically on the current line of text. 假设您不想更改此设置，则需要调整图像元素在当前文本行上垂直对齐的方式。

The vertical-align CSS property sets the vertical alignment of an inline element on the current line of text. vertical-align CSS属性设置行内元素在当前文本行上的垂直对齐方式。 It doesn't set it relative to the container. 它没有相对于容器设置它。

Therefore, you can set the vertical-align property to middle , top , or bottom , and as long as the image element is larger than the line-height of the current line of text, it will not have the extra space below it. 因此，可以将vertical-align属性设置为middle ， top或bottom ，并且只要图像元素大于当前文本行的line-height ，它下面就不会有多余的空间。

However, you need to remember what I just said about line-height . 但是，您需要记住我刚才说的line-height 。 In the event that your line-height is larger than your image element, vertical-align will do more than remove that extra spacing: it will actually align the image element on the line accordingly. 如果您的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. 请参见此jsFiddle，以查看大于图像高度的line-height如何影响结果的示例。

So, keeping with the HTML that you provided, to set the vertical alignment, you'd do the following CSS rule: 因此，与提供的HTML相同，要设置垂直对齐方式，请执行以下CSS规则：

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

Displaying as Block Level 显示为块级

Another option would be to change the image element to display as a block level element. 另一个选择是更改图像元素以显示为块级元素。 I don't recommend this approach unless you know you want a block level image. 除非您知道要块级图像，否则我不建议您使用这种方法。

Block level elements automatically fill to their container, and don't flow inline with text or other inline elements. 块级元素会自动填充到其容器中，并且不会与文本或其他内联元素一起内联。 Also, if you set a float on the image, this would force it to be block level. 另外，如果在图像上设置float ，则将其强制为block级。

So, you have two options to display as block level: 因此，您有两个选项可显示为块级别：

#header img {
    display: block;
}

or 要么

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

div标签中不需要的空间

问题描述

1 个解决方案

解决方案1
3 已采纳 2014-01-28 22:37:51

What is baseline? 什么是基线？

Vertical Alignment 垂直对齐

Displaying as Block Level 显示为块级

div标签中不需要的空间

问题描述

1 个解决方案

解决方案1 3 已采纳 2014-01-28 22:37:51

What is baseline? 什么是基线？

Vertical Alignment 垂直对齐

Displaying as Block Level 显示为块级

解决方案1
3 已采纳 2014-01-28 22:37:51