How to add a space between paragraphs when using css reset? [closed]

Question

What is the safest/no height change cross-browser way to add a space between paragraphs when using css reset?

<div>
<p class="text">paragraph1</p>
<p>&nbsp;</p>
<p class="text">paragraph2</p>
</div>
<div>
<p class="text">paragraph1</p>
<br>
<br>
<p class="text">paragraph2</p>
</div>

http://jsfiddle.net/unknown601/0ewvk3c9/

Answer 1

I find it useful to include space between adjacent paragraphs.

Example: http://jsfiddle.net/kppb0nLx/3/

/* a paragraph proceeded by another paragraph will have a top margin */
p + p {
    margin-top: 8px;
}

This allows you to keep paragraphs flush with the top/bottom of your container while still having space between them.

The options you listed (br and p purely for spacing) are not considered good practice. They don't represent the your content semantically and they create extra markup that can easily be replaced with CSS.

More Reading

Answer 2

The <br> tag should only be used to break line i.e <p>This is first line <br> This is second line.</p>

For spacing i would have to say on based on my personal experience & on observation of most of the frameworks margin is the best practice to create spacing between paragraph.

DEMO

CSS:

p{
    margin: 0 0 10px;
}

Edit: I like @Tim Medora solution much better: p + p { margin-top: 8px; } by adding top margin to adjacent p tags we eliminate the first and last p tag margin issues commonly faced.