CSS块元素div元素

Question

之间产生的间隙我有困难的div块之间的空间：

<div id="maincontentwrapper" > 
    <img src="images/content-top.png" alt="main content border image" border="1" /> 
    <div id="maincontent" > 
    <div id="pagecontent"> 
     <h1>Mission Statement</h1> 
    </div> 
    </div> 
    <img src="images/content-bottom.png" alt="main content border image" /> 
</div> 

这是创建一个页面一个完整的边框的图像。一切都很好，但只要我在页面内容中输入块级元素，例如如图所示，然后在content-top.png图像和maincontent div之间出现间隙。

如果我将第一个字符改为内联，例如一个没有突破性的空间或简单的字母，那么差距就不会出现。

这是（相关）CSS：

img { 
margin: 0; 
padding: 0; 
} 
#maincontentwrapper { 
} 
#maincontent { 
background-image: url('../../images/content-main.png'); 
background-repeat: repeat-y; 
min-height: 300px; 
width: 757px; 
} 
#pagecontent { 
width: 625px; 
margin-left: auto; 
margin-right: auto; 
} 

感谢所有帮助

Answer 1

这也可能是默认浏览器应用的余量。试试你的代码

h1 { margin: 0; } 

添加到CSS。这有帮助吗？

（该h1元素并不是唯一的块级元素，从这个以“吃亏”，p在大多数浏览器都有默认的利润了。）

如果你很确定你的客户端浏览器将支持CSS3，你有一个备份机制，或者你根本不关心，你可以做

.maincontent :first-child, .maincontent :first-child :first-child { 
    margin: 0; 
} 

将第一个孩子的边距设置为0，无论元素的类型。

你还有其他的东西可能 do是应用"reset stylesheet"，通过用零掩盖它们来取消浏览器的默认设置。但是，我不建议你这样做，因为浏览器的默认设置大部分时间都是有意义的，重置它们都可能导致干扰效果。

Answer 2

您是否尝试过其他元素而不是H1？我相信这个问题来自于H1元素的默认利润率，也许这就是“推低”div并留下一个缺口。顺便说一句，您是否使用Firefox的插件Firebug来测试CSS？它非常强大，可以让你随时修改。

Answer 3

我会说这是一个问题，因为浏览器的默认CSS设置，就像那些适用于H1 P等

一种方法来摆脱这些都是使用一些“重置”的CSS像在960grid：here

从我的经验，它工作得很好:)

Answer 4

也许是因为利润率正在崩溃。尝试添加

padding: 0 1px 0 1px;

给img或div或两者。

Answer 5

<img />标记默认呈现为内联。尝试display: block。