2017-05-19 37 views
-1

我目前正在一个网站上工作,尝试从头开始编写客户端,而不使用框架。但是,由于某种原因,我无法改变这个保证金底部的属性。我只想在h1,h3,h4,h5和p元素之间放置一些空间。我也使用了Eric Meyer的重置功能。无法更改页边空白属性(CSS)

的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中,它也可以工作。

+0

覆盖它您可以添加一个片段,所以我们可以想办法。嗯,或者你可能会尝试在你的'25px'(例如'margin-bottom:25px!important;')之后加上'!important' –

回答

0

头都已经有了其指定的CSS,所以你需要通过!important这样你只需添加或编辑功能/风格已经取得风格

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

    } 
+1

**来自复审队列**:我可以请求你在源代码中添加一些上下文-码。仅有代码的答案很难理解。如果您可以在帖子中添加更多信息,它可以帮助提问者和未来的读者。 – RBT