Question

What I want to do is target more than one <p> with the following code:

h1+p
{
    margin-left: 20px;
}

h2+p
{
    margin-left: 27px;
}

h3+p
{
    margin-left: 35px;
}

Below is the effect I am trying to achieve:

The problem is that when there is a new <p> element, the block of text is obviously going to revert to it’s normal position, without the margin, and not longer inline with the heading.

(like so)

Is there a better way of attacking this problem? (or one that works for that matter)

Answer 1

is this what you are trying to achieve? http://jsfiddle.net/chrismackie/5DgNH/