title: Uneven spacing between textboxes
body: <p>I have made a form in html. It's very subtle but I think there is uneven spacing between my text boxes and I'm not sure why:</p>
  
  <p><a href="https://i.stack.imgur.com/uAuT3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uAuT3.png" alt="enter image description here"></a></p>
  
  <p>I believe that the second gap is a couple of pixels wider than the first gap.</p>
  
  <p>I am learning and think it would be instructive for me to figure out why.</p>
  
  <p><strong>The Relevant HTML:</strong></p>
  
  <pre><code>  &lt;span class="span1"&gt;
      &lt;span class="date"&gt;
        Year:&lt;br&gt;&lt;br&gt;
        &lt;input class="textbox1" type="text" name="year" placeholder="yyyy"&gt;
      &lt;/span&gt;
      &lt;span class="date"&gt;
        Month:&lt;br&gt;&lt;br&gt;
        &lt;input class="textbox1" type="text" name="month" placeholder="mm"&gt;
      &lt;/span&gt;
      &lt;span class="date"&gt;
        Day:&lt;br&gt;&lt;br&gt;
        &lt;input class="textbox1" type="text" name="day" placeholder="dd"&gt;
      &lt;/span&gt;
    &lt;/span&gt;
  </code></pre>
  
  <p><strong>The Relevant CSS:</strong></p>
  
  <pre><code>.span1{
      display: inline-block;
      margin: 0 auto;
      vertical-align:middle;
      text-align:center;
      position: relative;
      width: 400px;
      padding-top: 63px;
      padding-bottom: 100px;
  }
  
  .date{
      display: inline-block;
  }
  
  .textbox1 {
      width: 70px;
      height: 30px;
      text-align: center;
  }
  </code></pre>