无法更改边距底部属性 (CSS)答案

【问题标题】：Unable to change margin-bottom property (CSS)无法更改边距底部属性 (CSS)
【发布时间】：2017-05-19 01:07:00
【问题描述】：

我目前正在开发一个网站，试图在没有框架的情况下从头开始编写客户端。但是，由于某种原因，我无法更改这个 margin-bottom 属性。我只想在 h1、h3、h4、h5 和 p 元素之间放置一些空间。我也使用了 Eric Meyer 的重置。

index.html

<body>
        <header class="container">
            <h1><a href="index.html">Jack's Music Portfolio</a></h1>
            <a href="aboutme.html">
                <h3>Some Header</h3>
            </a>
            <nav>
                <a href="index.html">Home</a>
                <a href="aboutme.html">About Me</a>
                <a href="popularlyrics.html">Popular Lyrics</a>
                <a href="songstories.html">Song Stories</a>
                <a href="contactme.html">Contact Me</a>
            </nav>
        </header>

        <section class="container">
            <h3>Driven to write music that brings <em>impact</em>.</h3>
            <p>Curabitur ut tempus enim. <strong>Introduce the Portfolio here</strong>. Nullam eget efficitur massa, nec imperdiet turpis. Nulla facilisi. Nunc faucibus lectus non cursus fermentum. Cras venenatis, urna sed fermentum gravida, enim lacus fringilla dolor, in cursus arcu diam id lectus. Nulla facilisis nisi est, et rutrum ligula dictum vitae.</p>
            <a href="contactme.html">Contact Me</a>
        </section>

        <section class="container">
            <section>
                <h5>Songs</h5>

                <h3>Song#1</h3>
                <p>Cras venenatis, urna sed fermentum gravida, enim lacus fringilla dolor, in cursus arcu diam id lectus.</p>

                <h3>Song#2</h3>
                <p>Cras venenatis, urna sed fermentum gravida, enim lacus fringilla dolor, in cursus arcu diam id lectus.</p>
            </section>
        </section>

        <footer class="container">
            <nav>
                <a href="index.html">Home</a>
                <a href="aboutme.html">About Me</a>
                <a href="popularlyrics.html">Popular Lyrics</a>
                <a href="songstories.html">Song Stories</a>
                <a href="contactme.html">Contact Me</a>
            </nav>

            <small>&copy Jack D. MUSIC</small>
        </footer>

    </body>

main.css

*, *:before, *:after {
    webkit-box-sizing: border-box;
    moz-box-sizing: border-box;
    box-sizing: border-box;
}

.container{
    margin: 0 auto;/*top and bottom 0, left and right auto*/
    padding-left: 30px;
    padding-right: 30px;
    width: 960px;
}


h1, h3, h4, h5, p{
    margin-bottom: 25px;

}

非常感谢任何帮助或建议！非常感谢！

编辑我发现出了什么问题。我不完全确定它背后的逻辑是什么，但基本上，如果我在链接到 main.css 之前将链接到 HTML 中的 reset.css，它可以工作（而不是相反）。如果我在样式 css 代码之前将重置 css 代码放入 main.css 中，它也可以工作。

【问题讨论】：

您可以添加一个 sn-p 以便我们弄清楚。嗯，或者您可以尝试在您的25px 之后添加!important（例如margin-bottom: 25px !important;）

标签： html css web frontend

【解决方案1】：

标头已经有其指定的 css，因此您需要使用 !important 覆盖它，这样您只需将功能/样式添加或编辑到已经创建的样式

  h1, h3, h4, h5, p{
        margin-bottom: 25px !important;

    }

【讨论】：

来自审核队列：我可以请求您在源代码周围添加一些上下文。仅代码的答案很难理解。如果您可以在帖子中添加更多信息，这将对提问者和未来的读者都有帮助。