Django/VueJS/PostgreSQL adding leading/trailing whitespace tabs

I have a text-field in Django I'm maintaining using Django-admin that requires preservation of white-space. As a result I'm wrapping it in a <pre> </pre> tag to do this when rendering using vueJS and vue-material.

The whitespace appears to be retained when using this method, and when looking at the descrip field of my model manually in python manage.py shell the whitespace is indeed stored in my db.

However, for some reason there is a mysterious leading white-space tab both at the beginning and end of my HTML when rendered, shown here:

And showing up in the HTML here:

Code snippets:

relevant html and css

  <md-layout md-column md-flex-xsmall="100" md-flex-small="55"
     md-flex-medium="70" md-flex-large="80" id="summary_block">
    <md-layout >
      <pre class="md-body">
         [[ product.descrip ]]
      </pre>
    </md-layout>
  </md-layout>

#summary_block > div.md-layout > pre {
  white-space: pre-wrap; 
  word-wrap: break-word;
  font-family: inherit;
}

Could this be a postgres issue? If so why wouldn't the whitespace show up when looking at object.descrip in the python shell?

I'm using postgres, vuejs, django v 1.10, python 3.5 and vue-material if any/all of that helps.