为什么我的锚填充超出了父列表项？ [复制]答案

【问题标题】：Why does my anchor padding go beyond the parent list item? [duplicate]为什么我的锚填充超出了父列表项？ [复制]
【发布时间】：2021-06-16 22:06:51
【问题描述】：

从图片中可以看出，

元素没有扩展，并且忽略了元素的填充。

代码结构是

    <nav class="main-nav">
        <ul class="main-nav__items">
            <li class="main-nav__item">
                <a href="">Packages</a>
            </li>
            <li class="main-nav__item">
                <a href="">Customers</a>
            </li>
            <li class="main-nav__item main-nav__item--cta">
                <a href="">Start Hosting</a>
            </li>
        </ul>
    </nav>

CSS 是：

.main-nav {
  display: none;
}

.main-nav__items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-nav__item {
  display: inline-block;
  margin: 0 1rem;
}

.main-nav__item a,
.mobile-nav__item a {
  text-decoration: none;
  color: #0e4f1f;
  font-weight: bold;
  padding: 0.2rem 0;
}

谁能解释一下为什么

没有调整（它没有固定的高度，所以应该调整）。

【问题讨论】：

标签： html css padding inline

【解决方案1】：

因为元素是 INLINE 元素，所以父元素不会调整到填充。所以父级忽略了它的填充。

简单修复：将 inline 元素转换为 inline-block 元素：

.main-nav__item--cta a{
    display: inline-block
 }

之后父级将调整到填充

【讨论】：