title: Why an empty button does not align vertically with one that has text inside?
body: <p>I have a toolbar with buttons, some have text in them and others don't. For some reason I don't really understand, they don't vertically align.</p>
  
  <p>Why? and how to fix it?</p>
  
  <p><img src="https://i.stack.imgur.com/W9ZCk.png" alt="screenshot"></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#tools{
     border: 1px solid black; 
  }
  
  #tools button{
      border-width: 2px;
   border-style: outset;
   border-color: #ccc;
      
   height: 24px;
   width: 24px;
      
   font-size: 9pt;
  }
  #tools button:active{
   border-style: inset;
  }
  
  button.Bl{
      font-weight: bold;
  }
  button.Bo{
      font-style: italic;
  }
  button.B4{
      background-color: #A00;
      text-shadow: 0.15em 0.15em #2A0000;
  }
  button.Bc{
      background-color: #F55;
      text-shadow: 0.15em 0.15em #3F1515;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="tools"&gt;
      &lt;button class="B4 pallete" title="§4 Dark Red"&gt;&lt;/button&gt;
      &lt;button class="Bc pallete" title="§c Red"&gt;&lt;/button&gt;
      &lt;button class="Bl pallete" title="§r Bold"&gt;B&lt;/button&gt;
      &lt;button class="Bo pallete" title="§r Italic"&gt;I&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/hjo41wm2/" rel="nofollow noreferrer">http://jsfiddle.net/hjo41wm2/</a></p>