有没有办法打破 CSS 中的这种继承填充

Question

我有这个 HTML：

<ul>
  <li>content <span>more</span></li>
</ul>

这是我的 CSS：

li{
  padding: 30px;
}
span{
  padding-top: -20px;
}

span上的填充不会生效。我可以通过更改 HTML 来解决它，但现在我面临这个问题，我想了解是否有解决方法。

Answer 1

内

联元素上的padding-top不起作用！使用块元素，或设置span { display:block } 。

Answer 2

将<span>设置为{display:inline-block}