Control top padding of H1 element in relation to bottom of above P element

In a basic block of html the top padding of the H1 element appears to be in relation to the H1 element above it and not the P开发者_如何学Go element right above it. Since I have a varying amount of P elements I can't use their bottom padding to control the position of the H1 element below, without affecting the spacing between each P element.

How do I get the H1 element to pad relative to the P above it?

<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>

Here is my CSS, which seems would create 27px between the bottom of the P element and the top of the H1 element.

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
}

Currently there is 12px of padding from the bottom of the P element to the top of the H1, and increasing the padding on the top of the H1 element does not increase the space between the P and the H1, but it does increase the space between the top of the H1 and the bottom of the H1 above it.

It is as if the H1 element ignores the properties of the P element and only reacts to the H1 above it.

you could try:

p + h1 {padding: 0 0;}

obviously substituting your padding values. But really its the margin collapsing that is changing the spacing, not the padding.

Example here: http://jsfiddle.net/PBJwm/1/

Just to be clear, padding is never a matter of being "relative" to anything else. Padding refers to the interior "spacing" of the element.

CSS troubleshooting tip: For margin, padding or positioning situations like this, I often find it helpful to specify background colors for each element in question. So if you gave your H1 a red background and your p a blue background, your expectation will only hold true if there is no gap between your red H1's and your blue p's. Use background instead of border since border changes overall dimensions.

Why are you floating your paragraphs but not your headers?

Margins behave differently when applied to floats, particularly in IE7 and below. Unless you have any real reason to float the paragraphs, don't!