为什么我的填充不适用于锚点，尽管它确实适用于按钮？ [复制]答案

【问题标题】：Why doesn't my padding apply to an anchor though it does apply to a button? [duplicate]为什么我的填充不适用于锚点，尽管它确实适用于按钮？ [复制]
【发布时间】：2019-05-01 02:21:17
【问题描述】：

以这段代码为例

.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>

我想在<a> 上应用填充，但它不起作用

我知道我可以在 <li> 上应用填充，但它不会起作用，因为当我应用填充时，整个东西不能点击，只有 <a> 部分是

【问题讨论】：

使其成为内联块 - 您不能将垂直填充应用于内联元素

标签： html css

【解决方案1】：

您可以在“btn”类上添加一个内联块，这样您就可以在四个边上添加边距和填充。与不能添加垂直填充的内联元素不同。

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

【讨论】：