title: Weird CSS-padding property behavior with 1px and none. Can someone explain this?
body: <p><img src="https://i.imgur.com/2ZcqNIZl.jpg" alt=""></p>
  
  <p>(First question on SO, don't have enough reputation to directly post an image.)</p>
  
  <p>Here's an image to show what's really going on, 1px of padding yields well over 20, while commenting out the padding property in total brings the border down to meet the content, instead of the content filling in the empty space above.</p>
  
  <p>It's my first time making a full website and this is one of the little bugs I haven't been able to figure out.</p>
  
  <pre><code>div.main {
    width: 50%;
    margin: auto;
    /*padding: 1px;*/
    text-align: center;
    background-color: #DCD083;
  }
  </code></pre>
  
  <p>versus</p>
  
  <pre><code>div.main {
    width: 50%;
    margin: auto;
    padding: 1px;
    text-align: center;
    background-color: #DCD083;
  }
  </code></pre>