div标签中的不需要的空格 [英] Unwanted Space in div tags
问题描述
我有两个div id。一个有一个图像在其中，另一个有一个背景图像。在这两个div之间有一个不需要的空间。在dreamweaver设计视图中，它看起来好像没有空间，但如果我使它在现实或在浏览器中预览空间再次出现。
I have two div id's. One has has an image in it and the other has a background image. There is an unwanted space in between these two divs. 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.
这是css为divs
This is the css for the divs
#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）
This is my body html (ignore the multiple line breaks, this is just so I can see the bg img in the div)
<body>
<div id="header"><img src="img/Header.jpg" /></div>
<div id="content"><br><br><br><br><br><br><br></div>
</body>
推荐答案
图片的默认显示设置为 inline 。这使得它们与文本一起流动，与基线垂直对齐。除非通过将 vertical-align 设置为其包含元素上的其他内容来更改，所有文本也会默认与基线垂直对齐。
Images have a default display setting of 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.
基线漂浮在实际线的底部。查看小写字母 g 。顶部圆圈的底部是基线。
The baseline floats above the bottom of the actual line. Look at the lower-case letter 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:
默认情况下，图像元素设置为 display：inline 。假设您不想更改此值，您需要调整图片元素在当前文本行上的垂直排列方式。
Again, image elements are set to display: inline by default. Assuming you don't want to change this, you need to adjust how the image element aligns vertically on the current line of text.
垂直方向的垂直-align CSS属性设置当前文本行上的内联元素的垂直对齐方式。
The vertical-align CSS property sets the vertical alignment of an inline element on the current line of text. It doesn't set it relative to the container.
因此，您可以设置 vertical-align
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.
但是，你需要记住我刚才所说的 line-height 。如果您的 line-height 大于您的图片元素， vertical-align 额外间距：它实际上将图像元素对齐在行上。 请参阅此jsFiddle查看如何 line-height 大于图片的高度会影响结果。
However, you need to remember what I just said about 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. 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规则：
So, keeping with the HTML that you provided, to set the vertical alignment, you'd do the following CSS rule:
#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.
块级元素自动填充到他们的容器，不要内联文本或其他内联元素。此外，如果您在映像上设置 float ，这将强制它阻止级别。
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.
因此，您有两个选项显示为块级别：
So, you have two options to display as block level:
#header img {
display: block;
}
或
#header img {
float: left; /* You could float right too */
}
这篇关于div标签中的不需要的空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
