[Solved] It seems impossible to have 2 blank lines between p tags Without modification of the original elements

Question

Ok, let’s get back to html basics, probably it’ll help!

First of all, a p tag is a block element that contains inline elements.
Short tutorial here: http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

So p is a paragraph, and br means a line breaks. In fact, you divides your content in paragraph, and sometimes your need to change line with line breaks. If you want to have, lets say:

text A

text B

Then you should have two different paragraphs:

<p style="margin-bottom: 1em;">text A</p>
<p>text B</p>

(ok, put you css in a different file, not inline)

The margin push the other paragraph. For line breaks, it should look like this:

text A
text B

<p>text A<br>text B</p>

I keep the paragraph around all, but a line break in it.

And applying margin-bottom to p in css, all your paragraph will have the same distance! A bit like the style thing with normal, header 1, header 2… in Word where you can decide margin before and after.

Hope it helps!

EDIT:

You can do it with Javascript, or I prefer to use jQuery that way:
(in jQuery coding)

$('p').each(function() {
    var $this = $(this);
    if ($this.html() == '&nbsp;') {
        $this.remove();   
    }
});

You can use regex, for example. I removed the p tag containing the non breaking space because it add a full paragraph between. Keep two different paragraph so it will be easier to put some margins and control everything with css (like I said a the top of my answer. Don’t try to add br or p between, but margins!). With br, you need 3 br to skip two lines between.

Is that what you need? If not, please be more clear!

Accepted Answer