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>

这是创建一个带有完整边框图像的页面。一切都很好，但是只要我在pagecontent中输入一个块级元素，例如如图所示的标题，然后在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。

你可以做的其他事情是应用"reset stylesheet"，通过用零屏蔽它们来撤消浏览器的默认值。但是，我不建议你这样做，因为浏览器的默认值在大多数情况下实际上是有意义的，重置它们都可能导致令人不安的影响。

Answer 2

你尝试过另一种元素而不是H1吗？我认为问题来自H1元素默认具有边距，也许这就是“推动”div并留下空白。顺便问一下，你使用Firefox的插件Firebug来测试CSS吗？它非常强大，可以让您即时修改。

Answer 3

我想说这是一个问题，因为浏览器默认的css设置，例如应用于h1 p等的设置。

摆脱这种情况的一种方法是使用一些像960grid中的“重置”css：here

根据我的经验，它运作良好：）

Answer 4

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

padding: 0 1px 0 1px;

img或div或两者。

Answer 5

默认情况下，<img />标记以内联方式呈现。试试display: block。

CSS块元素在div元素之间创建间隙

5 个答案: