Question

在html的基本块中，H1元素的顶部填充似乎与其上方的H1元素有关，而不是其上方的P元素。由于我有不同数量的P元素，我不能使用它们的底部填充来控制下面H1元素的位置，而不会影响每个P元素之间的间距。

如何让H1元素相对于它上面的P填充？

<h1>heading</h1>
<p>text text</p>
<p>text text</p>
<h1>heading</h1>
<p>text text</p>
<p>text text</p>
<h1>heading</h1>
<p>text text</p>
<p>text text</p>

这是我的CSS，它似乎会在P元素的底部和H1元素的顶部之间创建27px。

p {
float: left;
font-size: 12px;
line-height: 15px;
padding: 0px 0px 12px 0px;
}

h1 {

font-size: 22px;
line-height: 22px;
font-weight: 200;
padding: 15px 0px 20px 0px;
margin: 0
}

目前从P元素的底部到H1的顶部有12px的填充，并且增加H1元素顶部的填充不会增加P和H1之间的空间，但它会增加H1顶部与H1之上的底部之间的空间。

好像H1元素忽略了P元素的属性，只对它上面的H1作出反应。

Answer 1

你可以尝试：

p + h1 {padding: 0 0;}

显然会替换你的填充值。 But really its the margin collapsing正在改变间距，而不是填充。

此处示例：http://jsfiddle.net/PBJwm/1/

Answer 2

为了清楚起见，填充绝不是与其他任何东西“相对”的问题。填充是指元素的内部“间距”。

CSS故障排除提示：对于这样的边距，填充或定位情况，我经常发现为每个元素指定背景颜色很有帮助。因此，如果您将H1设置为红色背景而背景为蓝色背景，则只有红色H1和蓝色p之间没有间隙时，您的期望才会成立。使用背景而不是边框，因为边框会改变整体尺寸。

Answer 3

为什么要浮动段落而不是标题？

应用于浮点数时，边距的行为会有所不同，特别是在IE7及更低版本中。除非你有任何真正的理由浮动段落，否则不要！

控制H1元素相对于上述P元素底部的顶部填充

3 个答案: