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インライン要素では機能しません！ブロック要素を使用するか、を設定しspan { display:block }ます。

Answer 2

に設定<span>する{display:inline-block}