Difference between pre(html tag) and white-space:pre newline omission

Question

I thought pre(html tag) active just like 'white-space:pre'. But it's not.

<pre>
aaa
bbb
</pre>

<p style="white-space:pre;">
aaa
bbb
</p>

<pre> ignore the first and last \n. But <p> keep the first \n and ignore the last one. Why?

jsfiddle test

Answer 1

The HTML standard states:

Note: In the HTML syntax, a leading newline character immediately following the pre element start tag is stripped.

Read here: http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-pre-element

So, the <pre> element contains this special rule. It seems that if other types of elements have a white-space:pre setting, that rule doesn't apply.

Answer 2

Actually, they are the same. The reason you're getting the space on top for <p>s is because by default <p> adds an empty line above itself so that you can distinguish between paragraphs. <pre> doesn't do that, so you get no extra space there.