使用<pre> tag

Question

When I display a diamond using HTML <pre>, in Sublime it looks fine:

<pre>
   *
  ***
 *****
  ***
   *
</pre>

But in the browser it looks weird:

Why did this happen? How could I get it looks right?