Question

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

Answer 1

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!