有没有办法打破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}