Why doesn't my padding apply to an anchor though it does apply to a button?

Question

Take This code for example

.ul {
  list-style-type: none;
}

.li {
  display: inline-block;
  border: black solid 1px;
  margin-left: 20px;
}

.btn {
  padding: 20px;
  text-transform: uppercase;
}

<ul class="ul">
  <li class="li">
    <button class="btn">
      Button Here
    </button>
  </li>
  <li class="li">
    <a class="btn" href="#">
      Link Here
    </a>
  </li>
</ul>

I want apply padding on <a> but it is not working

I know i can apply padding on <li> but it will not work because when i apply padding the whole thing is not click able only the <a> part is

Answer 1

You can add an inline-block on the class "btn" so you can have margins and paddings added on the four sides. Different from the inline elements that you can't add vertical paddings.

.btn {
  padding: 20px !important;
  text-transform: uppercase;
  display: inline-block;
}