CSS块元素div元素

之间产生的间隙我有困难的div块之间的空间：CSS块元素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; 
}

感谢所有帮助

来源

2010-08-04 neil

alt =“主要内容边框图像”？真的吗？现在就去阅读http://www.alanflavell.org.uk/alt/alt-text.html！ – Quentin 2010-08-04 22:35:38

这是一分钟的HTML案例:) – neil 2010-08-06 19:58:03

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

h1 { margin: 0; }

添加到CSS。这有帮助吗？

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

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

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

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

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

来源

2010-08-04 22:28:50 MvanGeest

+1用于解释为什么'reset.css'是不好的做法。 – You 2010-08-04 22:58:43

修复它。谢谢。我想我需要了解更多关于盒子模型的内容，因为我认为它只是在div块中的头部添加一个边距而不是外部块。它看起来很糟糕的原因是我有一个身体的背景，头上的边缘是在整个页面上创建一个10像素的白色块。 – neil 2010-08-05 01:46:54

我的意思是整个页面有10个像素的间隙。有没有比重置每个元素的边距更好的方法？ – neil 2010-08-05 01:53:08

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

来源

2010-08-04 22:29:34 StevenGilligan

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

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

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

来源

2010-08-04 22:34:22

谢谢。如上所述，但我遇到的问题是如何最好地解决它以阻止其他元素，除了将所有内容都重置为零边距外。 – neil 2010-08-05 01:54:09

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

padding: 0 1px 0 1px;

给img或div或两者。

来源

2010-08-04 22:43:24 jcubic

将页边距设置为0，如上所述。但我想如何修复它任何其他元素？ – neil 2010-08-05 01:49:10

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

来源

2013-08-14 09:21:11 antonagestam

CSS块元素div元素

回答

相关问题