2017-05-19 63 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