我目前正在一個網站上工作,嘗試從頭開始編寫客戶端,而不使用框架。但是,由於某種原因,我無法改變這個保證金底部的屬性。我只想在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;
}
任何幫助或建議,非常感謝!非常感謝!
編輯 我發現了什麼是錯的。我不完全確定它背後的邏輯是什麼,但基本上,如果我在鏈接到main.css之前將鏈接放置在HTML中的reset.css,它可以工作(而不是其他方式)。如果我在設計CSS代碼之前將重置css代碼放入main.css中,它也可以工作。
覆蓋它您可以添加一個片段,所以我們可以想辦法。嗯,或者你可能會嘗試在你的'25px'(例如'margin-bottom:25px!important;')之後加上'!important' –