2017-05-19 11 views
-1

現在、Webサイトで作業しており、フレームワークなしでクライアントサイドをゼロから作成しようとしています。しかし、何らかの理由で、私はこのマージンボトムのプロパティを変更することができません。 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; 

} 

すべてのヘルプや提案は大歓迎です!どうもありがとう!

EDIT 私は何が間違っているかを知りました。私はそれの背後にある論理が何であるかは完全には分かっていませんが、基本的に、main.cssへのリンクの前にHTMLのreset.cssへのリンクを置くと、それはうまくいきます。私はスタイリングCSSコードの前に、最初にmain.cssにリセットのCSSコードを入れても動作します。

+0

を追加または編集する!importantを使用して、それをオーバーライドする必要があるので、ヘッダがすでに指定されたCSSを持っていますそれを理解する。うまくいけば、あなたの '25px'の後ろに'!important'を追加しようとするかもしれません(例えば 'margin-bottom:25px!important;') –

答えて

0

あなたは私たちができるように、スニペットを追加することがあり、そのようあなただけの機能/スタイルすでに行われるスタイル

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

    } 
+1

**レビューキューから**:あなたのソースの周りにコンテキストを追加してください-コード。コードのみの回答は理解しにくいです。あなたの投稿にさらに情報を追加することができれば、これはAskerと将来の読者に役立ちます。 – RBT

関連する問題