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