How to add space between paragraphs when using css reset?

Question

What is a safe / no-height cross-browser way to add 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 helpful 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 edge of the container while maintaining space between them.

The parameters you specified ( br and p purely for the interval) are not considered good practice. They do not represent your content semantically, and they create additional markup that can easily be replaced by CSS.

Read More

Answer 2

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

For the interval that I would have to talk about, based on my personal experience and the observation of most margin frameworks, it’s best to create spaces between paragraphs.

Demo

CSS

 p{ margin: 0 0 10px; } 

Edit: I like @Tim Medora's solution much better: p + p { margin-top: 8px; } p + p { margin-top: 8px; } , adding an upper marker to adjacent p-tags, we eliminate the problems with the first and last p-marks, which are usually found.