title: anchor tag height value won't change
body: <p>I tried all of the solutions enumerated here:</p>
  
  <p><a href="https://stackoverflow.com/questions/10357862/css-anchor-will-not-accept-height">CSS: anchor will NOT accept height</a></p>
  
  <p>namely setting the <code>&lt;a&gt;</code> tag to <code>display:block</code> and <code>display:inline-block</code> respectively to no avail. </p>
  
  <p>Anybody have any ideas? </p>
  
  <p><a href="https://jsfiddle.net/ebbnormal/wrtu538f/9/" rel="nofollow noreferrer">https://jsfiddle.net/ebbnormal/wrtu538f/9/</a></p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;div class="search-bar-locations"&gt;
     &lt;a href='#' id='center'&gt;
       SEARCH BY PROGRAM
       &lt;i class='fa fa-sort-desc'&gt;&lt;/i&gt;
     &lt;/a&gt; 
    &lt;/div&gt;
  </code></pre>
  
  <p>Here is my CSS:</p>
  
  <pre><code> .search-bar-locations a{
     overflow:hidden;
     display:inline-block;
   }
  
  .search-bar-locations #center {
    display:inline-block;
    height: 40px;
    width: 200px;
    background: #eab63e;
    padding: 15px;
    color: white;
  }
  </code></pre>
  
  <p>Here is what it is rendering the <code>&lt;a&gt;</code> as 230px X 70px as opposed to 200 x 40</p>
  
  <p><img src="https://i.stack.imgur.com/6lAh1.png" alt="enter image description here"></p>