按钮与li元素出现意外内边距的原因咨询

为何每个li元素及其内部按钮会出现顶部内边距？已知问题源于给按钮设置border:none，但li为何无法适配按钮新高度，仍留细小空隙？

复现代码 #

CSS #

.test {
  width: 10rem;
  list-style: none;
  margin: 0;
}

ul.test li {
  background: black;
  padding: 0;
}

ul.test li button {
  background: red;
  border: none;
}

HTML #

<ul class="test">
  <li>
    <div>
      <button>
  Hello
  </button>
    </div>
  </li>
  <li>
    <div>
      <button>
  World
  </button>
    </div>
  </li>
</ul>

原因分析与解决方法 #

这个空隙不是内边距，是行内元素基线对齐规则导致的。

按钮默认是行内块级元素（inline-block），浏览器会默认让它与文字基线对齐。默认状态下按钮自带边框，边框的高度刚好填补了基线对齐产生的空隙；当你设置border:none后，按钮的实际高度收缩，但基线对齐的规则还在执行，所以顶部就露出了父元素（li、div）的黑色背景。

另外，你代码里按钮内部的文字前后有换行和空格，这些空白字符会占据行高空间，也会加重空隙的视觉效果。

解决方法很直接：

• 给按钮添加display: block，将其转为块级元素，直接占满父容器空间，彻底规避基线对齐问题；
• 或者给按钮添加vertical-align: top，强制它与父元素顶部对齐；
• 顺带清理按钮内的空白字符，避免额外行高干扰。

调整后的示例CSS：

ul.test li button {
  background: red;
  border: none;
  display: block; /* 也可替换为 vertical-align: top */
}

内容的提问来源于stack exchange，提问作者Pain