title: Css link button with padding not respecting top and bottom margins
body: <p>This button is not respecting margin-top and margin-bottom, and i have no idea why... </p>
  
  <pre><code>.button {
      background: #E48F8F;
      border: 0;
      padding: 15px 45px 15px 45px;
      background-color:DeepSkyBlue;
      color:white;
      font-family:'Gotham Book';
      font-size:15px; 
      margin-top:30px;
  }
  </code></pre>
  
  <p>Here's the HTML: </p>
  
  <pre><code>&lt;div class="side_bar"&gt;
       &lt;h3&gt;Veja Também&lt;/h3&gt;
       &lt;div class="separator"&gt;&lt;/div&gt;
       &lt;div class="side_bar_item"&gt;
           &lt;img src="img/psicoterpia.jpg" /&gt;
           &lt;h3&gt;Psicoterapia&lt;/h3&gt;
           &lt;p&gt;A Psicoterapia é uma prática clínica desenvolvida e aplicada por psicólogos, com o intuito de oferecer, tanto para os que têm uma queixa definida ou não, condições que proporcionem mais auto-conhecimento e, consequentemente, um melhor estilo de vida. Existem diversas abordagens e cada uma delas atende melhor a um determinado tipo de indivíduo.&lt;/p&gt;
           &lt;a href="#" class="button"&gt;Saiba Mais&lt;/a&gt;
       &lt;/div&gt;   
  &lt;/div&gt;
  </code></pre>
  
  <p>here's a picture of what's happening:</p>
  
  <p><img src="https://i.stack.imgur.com/bWDtf.png" alt="enter image description here"></p>