title: Remove leading whitespace from whitespace: pre element
body: <p>I want to use a custom style for code snippets in my blog. I defined the following style:</p>
  
  <pre><code>mystyle {  
    background: #C3FFA5;  
    border: solid 1px #19A347;  
    color: #191919;  
    display: block;  
    font-family: monospace;  
    font-size: 12px;  
    margin: 8px;  
    padding: 4px;  
    white-space: pre;  
  }
  </code></pre>
  
  <p>I use it as follows:</p>
  
  <pre><code>&lt;mystyle&gt;
  int main() {
      cout &lt;&lt; "Hello World" &lt;&lt; endl;
  }
  &lt;/mystyle&gt;
  </code></pre>
  
  <p>This gives the following output. I have tried on Firefox and Google Chrome. </p>
  
  <p><img src="https://i.stack.imgur.com/ItQdw.jpg" alt="Output"></p>
  
  <p>I want to remove the extra line at the start of the block. Obviously, I understand where the newline comes from, and that I can use <code>&lt;mystyle&gt;int main() {</code> instead. If I use <code>&lt;pre&gt;</code> instead of <code>&lt;mystyle&gt;</code>, there is no extra newline, so is it possible to do this with my custom style too?</p>