html - 列表中的间距，似乎无法覆盖 <h3> 自动空格

Question

好吧，我可能又一次错过了简单的解决方案，但挫败感很快就来了。我想要做的是能够设置列表项之间的空间。我的问题是我似乎无法覆盖 h3 标签创建的空间。

    <ul style="list-style-type:none">
        <li><h3>The Oscar is only worth $1</h3></li>
        <li><h3>It takes 10 days to make one Oscar</h3></li>
        <li><h3>The statuettes are 24K gold plated, bronze underneath</h3></li>
        <li><h3>For 3 years during WWII, the statues were made of plaster</h3></li>
        <li><h3>Over 3000 Oscars have been awarded</h3></li>
        <li><h3>The statues are 8.5 pounds and 13.5 inches tall</h3></li>
    </ul> 

我试过用 h3 标签创建一个类，但没有成功。我在 css 中尝试了不同的行，例如:

    li{
      margin: 10px 0;
    }

或

    li { padding: 10px 0px 0px; }
    li:first-child { margin-bottom: 0px; }

或

    li:not(:last-child) {
        margin-bottom: 5px;
    }

我无法在css中更改h3标签间距，因为该标签在其他页面上使用。可以做点什么，这样每行 li 都不需要 h3 标签吗？也许通过 javascript 作为最后的手段？ 求助!!

Answer 1

要解决此问题，您可以专门针对 h3 标记。问题是您正在尝试修复包含 li 的 h3 的样式。这不是 CSS 的工作原理。您必须直接针对有问题的元素来覆盖 CSS。

li h3 {
  margin: 10px 0;
}

<ul style="list-style-type:none">
    <li><h3>The Oscar is only worth $1</h3></li>
    <li><h3>It takes 10 days to make one Oscar</h3></li>
    <li><h3>The statuettes are 24K gold plated, bronze underneath</h3></li>
    <li><h3>For 3 years during WWII, the statues were made of plaster</h3></li>
    <li><h3>Over 3000 Oscars have been awarded</h3></li>
    <li><h3>The statues are 8.5 pounds and 13.5 inches tall</h3></li>
</ul>