title: Removing top and bottom space on a tag
body: <p>is there a way to remove invisible space on top/bottom of a &lt;a> tag.
  I have tryed removing paddings, margins and other positions.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="dropdown"&gt;
      &lt;button onclick="myFunction()" class="dropbtn"&gt;&lt;div class="cog"&gt;&lt;/div&gt;&lt;/button&gt;
      &lt;div id="myDropdown" class="dropdown-content"&gt;
          &lt;div class="dop"&gt;&lt;/div&gt;
          &lt;a href="#"&gt;Text&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.dropbtn {
      height: 34px;
      width: 34px;
      background: #f0f0f0;
      border-radius: 3px;
      border: none;
      cursor: pointer;
      transition: 0.3s ease;
      -webkit-transition: 0.3s ease;
      -moz-transition: 0.3s ease;
      -o-transition: 0.3s ease;
      vertical-align: none;
  }
  
  .dropbtn:hover, .dropbtn:focus {
      background: #ebebeb;   
  }
  
  .dropdown {
      position: relative;
      display: inline-block;
      margin-top: 100px;
      margin-left: 100px;
  }
  
  .dropdown-content {
      display: none;
      position: absolute;
      background-color: #ffffff;
      width: 140px;
      border-radius: 3px;
      left: -53px;
      top: 48px;
  }
  
  .dropdown-content a {
      color: #b7b7b7;
      text-decoration: none;
      font-family: OpenSans-Regular;
      font-size: 12px; 
      text-align: center;
      display: block;
      outline-width: 0px;
  }
  
  .show {display:block;}
  </code></pre>
  
  <p>This is how it looks right now -</p>
  
  <p><a href="https://i.stack.imgur.com/8yRB8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8yRB8.png" alt="enter image description here"></a></p>
  
  <p>This is how it should look like -
  <a href="https://i.stack.imgur.com/K9dWH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K9dWH.png" alt="enter image description here"></a></p>
  
  <p>Kinds regards, Ričards.</p>