Is it impossible to have 2 blank lines between

Question

HTML have bothered me since HTML1 emerged.

One thing is about line breaks.

http://jsfiddle.net/LhDFs/2/

<p>1</p>
<p>2</p>

<p>br1</p>
<br/>
<p>br2</p>

<p>p1</p>
foo
<p>p2</p>

<p>pp1</p>
    <p>foo</p>
<p>pp2</p>

p tag has 1 line between the element.

Is it impossible to have 2 blank lines between <p>? It appears <br/> or space symbol doesn't work for that.

Well, of course, it's possible to use <br/> instead of <p>, but now I tweak Markdown, especially gfm, so I need to preserve paragraph structure.

I short, it's way too strange that we never be able to have 2 blank lines as long as we stick on <p>.

What I consider is

foo


bar

2 blank lines:instead of

foo



bar

3 blank lines with p tag structure.

EDIT:

Well, what I intended is to have consistent structure of P tag, but thanks to everyone, I've got a hint that I can prepare multiple classed p tag with CSS hack.

This is truly hacky on first thought, but I think I can manage it. Appreciated to all comments.

EDIT2:

I thought we have solution for this, but it seems not; I post another:

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

Answer 1

Try this:

<br />
&nbsp;
<br />

nbsp means "non-breaking space".

Answer 2

White space in your mark up (new lines, spaces) will not show up on the front end of a website.

This:

<p>example</p>
<p>example</p>

Is the same as:

<p>
    example
</p>


<p>
    example
</p>

On a website, both those examples will appear exactly the same.

To control spacing, padding, margin and position on the front end of a website we use css:

HTML

<p>
    example
</p>

CSS

p {
    padding-left: 20px;
}

Here is a demo showing different paragraph margins controlled by css:

HTML

<p class="noMargin">No margin</p>
<p class="noMargin">No margin</p>
<p class="noMargin">No margin</p>
<p>Default margin</p>
<p>Default margin</p>
<p>Default margin</p>
<p class="doubleMargin">Double margin</p>
<p class="doubleMargin">Double margin</p>
<p class="doubleMargin">Double margin</p>

CSS

p.noMargin {
    margin: 0;
}
p.doubleMargin {
    margin: 2em 0;
}

Demo

Answer 3

If I understand you correctly it seems to be working for me. But one thing is the correct syntax for line break is:

<br>
<br />

Or style it like one of these

<p style="margin-bottom: 10px;">text</p>
<p style="line-height: 200%;">text</p>

A line height in percent of the current font size