css - 有没有办法打破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在内联元素上不起作用！使用块元素或 set span { display:block }。

Answer 2

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