Question

我目前正在一个网站上工作，试图从头开始编写客户端而不使用框架。但是，出于某种原因，我无法改变这种保证金底层属性。我只想在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中，它也可以工作。

Answer 1

标题已经有了指定的css所以你需要使用!important来覆盖它，就像你刚刚添加或编辑已经制作的样式的函数/样式一样

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

    }

无法更改margin-bottom属性（CSS）

1 个答案: