标题边距正在推动div与背景图像

时间：2017-09-07 09:55:15

标签： html5 css3 margins

我想在标题和.content-container之间设置100px的边距。每次我在标题或.content-container上设置边距时，也会推送背景图像。也许它连接到.content-wrap和header选择器的位置属性，但我不确定。我仍然是前端开发人员的新手，所以我不确定问题出在哪里。

html, body, header, h1, h2, h3, div, figure, figcaption, img, p, a {
margin: 0;
padding: 0;
border: 0;
}

html, body {
height: 100%;
}

h1, h2, h3, p {
font-family: sans-serif;
}

.sticky-footer-wrapper {
min-height: 100%;

/*Equal to height of footer*/
margin-bottom: -200px;
}

.content-wrap {
width: 100%;
height: 100%;
display: block;
position: relative;
z-index: -10;
}

.content-wrap::after {
content: "";
background: #5F5449 url(http://margraonline.com/wp-content/uploads/2015/08/pretty-coffee-beans.jpeg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}

header {
position: relative;
height: 100px;
background: #291711;
}

header img {
display: block;
padding-top: 20px;
padding-right: 10px;
padding-left: 20px;
float: left;
}

header h1 {
color: #EEF0F2;
font-size: 40px;
font-weight: bold;
padding-top: 20px;
padding-left: 20px;
}

header nav {
float: right;
padding-bottom: 0;
}

header nav a {
text-decoration: none;
color: #D1BEB0;
padding-right: 15px;
font-size: 20px;
}

a:nth-child(5) {
padding-right: 55px;
}

a:hover {
color: #938BA1;
}

#active-link {
color: #938BA1;
text-decoration: underline;
}

.content-container {
margin-top: 100px;
margin-bottom: 300px;
width: 60%;
background-color: #D9C9BE;
border: 2px solid #291711; 
}

.content-container h2 {
font-size: 36px;
color: #4E453C;
text-decoration: underline;
text-align: center;
padding: 15px 0;
} 

.content-container h3 {
font-size: 26px;
color: #3C2C26;
text-align: center;
padding: 20px 0 10px 0;
}

figure {
display: block;
border: 1px solid #3C2C26;
background-color: #FFFCF3;
height: 300px;
width: 400px;
margin: 0 auto;
}

figure img {
width: 100%;
text-align: center;
}

figcaption, p {
text-align: center;
padding-bottom: 10px;
}

blockquote {
position: relative;
font-size: 18px;
}

footer, push {
height: 200px;
}

footer {
width: 100%;
background-color: #291711;
text-align: center;
}

footer nav a {
float: inherit;
text-decoration: none;
color: #D1BEB0;
font-size: 28px;
font-family: Arial, serif;
font-weight: lighter;
padding-right: 15px;
}

#top-row {
padding-top: 25px;
padding-bottom: 15px;
}

#bottom-row {
padding-bottom: 25px;
}

footer p {
color: #D1BEB0;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Bloc Frontend Formations Part 1</title>
</head>
<body>

  <div class="sticky-footer-wrapper">
  
  <header>
    <img src="https://i.imgur.com/v6FOpf0.png" title="source: imgur.com" />
    <h1>Specialty Coffee Company</h1>
    <nav>
      <a href="#">Home</a>
      <a href="#">About SCC</a>
      <a id="active-link" href="#">Rare Coffees</a>
      <a href="#">Store</a>
      <a href="#">Contact us</a>
    </nav>
  </header>

  <!-- Content Wrap -->
  <div class="content-wrap">
    
    <!-- Content Container -->
    <section class="content-container">
      <h2>Rare Coffees</h2>
      <h3>Kopi Luwak</h3>
        <figure>
          <img src="https://www.indoneo.com/wp-content/uploads/2017/03/luwak_coffee_for_sale.jpg" alt="Kopi Luwak Coffee">
          <figcaption><i>Kopi luwak for sale in Indonesia.</i></figcaption>
        </figure>  
      <blockquote>"It’s the world’s most expensive coffee, and it’s made from poop. Or rather, it’s made from coffee beans that are partially digested and then pooped out by the civet, a catlike creature. A cup of kopi luwak, as it’s known, can sell for as much as $80 in the United States."</blockquote>
     <p><cite>The Disturbing Secret Behind the World’s Most Expensive Coffee</cite> by Rachael Bale. <a href="http://www.nationalgeographic.com/">National Geographic</a>. <time>April 29, 2016</time></p>

    <!-- End Content Container -->
    </section>

  <!-- End Content Wrap -->
  </div>
  
  <!-- Push for Sticky Footer -->
  <div class="push"></div>

  <!-- End Sticky Footer Wrapper -->
  </div>

  <footer>
    <nav id="top-row">
      <a href="#">Locations</a>
      <a href="#">Press</a>
      <a href="#">Blog</a>
      <a href="#">Jobs</a>
      <a href="#">FAQ</a>
    </nav>
    <nav id="bottom-row">
      <a href="#">Sustainability</a>
      <a href="#">Contact</a>
    </nav>
    <p>Speciality Coffee Company, Torokv&eacutesz &uacutet 95-97, Budapest</p> 
  </footer>

</body>
</html>

1 个答案:

答案 0 :(得分：0)

您需要padding-top而不是margin-top 100px。

原因：边距增加了元素之间的空间，它实际上并没有增加元素的尺寸，而填充增加了元素边缘和内容之间的空间，这就是所需要的目前的情况！

＆＃13;
＆＃13; 
html, body, header, h1, h2, h3, div, figure, figcaption, img, p, a {
margin: 0;
padding: 0;
border: 0;
}

html, body {
height: 100%;
}

h1, h2, h3, p {
font-family: sans-serif;
}

.sticky-footer-wrapper {
min-height: 100%;

/*Equal to height of footer*/
margin-bottom: -200px;
}

.content-wrap {
width: 100%;
height: 100%;
display: block;
position: relative;
z-index: -10;
}

.content-wrap::after {
content: "";
background: #5F5449 url(http://margraonline.com/wp-content/uploads/2015/08/pretty-coffee-beans.jpeg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}

header {
position: relative;
height: 100px;
background: #291711;
}

header img {
display: block;
padding-top: 20px;
padding-right: 10px;
padding-left: 20px;
float: left;
}

header h1 {
color: #EEF0F2;
font-size: 40px;
font-weight: bold;
padding-top: 20px;
padding-left: 20px;
}

header nav {
float: right;
padding-bottom: 0;
}

header nav a {
text-decoration: none;
color: #D1BEB0;
padding-right: 15px;
font-size: 20px;
}

a:nth-child(5) {
padding-right: 55px;
}

a:hover {
color: #938BA1;
}

#active-link {
color: #938BA1;
text-decoration: underline;
}

.content-container {
padding-top: 100px;
margin-bottom: 300px;
width: 60%;
background-color: #D9C9BE;
border: 2px solid #291711; 
}

.content-container h2 {
font-size: 36px;
color: #4E453C;
text-decoration: underline;
text-align: center;
padding: 15px 0;
} 

.content-container h3 {
font-size: 26px;
color: #3C2C26;
text-align: center;
padding: 20px 0 10px 0;
}

figure {
display: block;
border: 1px solid #3C2C26;
background-color: #FFFCF3;
height: 300px;
width: 400px;
margin: 0 auto;
}

figure img {
width: 100%;
text-align: center;
}

figcaption, p {
text-align: center;
padding-bottom: 10px;
}

blockquote {
position: relative;
font-size: 18px;
}

footer, push {
height: 200px;
}

footer {
width: 100%;
background-color: #291711;
text-align: center;
}

footer nav a {
float: inherit;
text-decoration: none;
color: #D1BEB0;
font-size: 28px;
font-family: Arial, serif;
font-weight: lighter;
padding-right: 15px;
}

#top-row {
padding-top: 25px;
padding-bottom: 15px;
}

#bottom-row {
padding-bottom: 25px;
}

footer p {
color: #D1BEB0;
}
＆＃13; 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Bloc Frontend Formations Part 1</title>
</head>
<body>

  <div class="sticky-footer-wrapper">
  
  <header>
    <img src="https://i.imgur.com/v6FOpf0.png" title="source: imgur.com" />
    <h1>Specialty Coffee Company</h1>
    <nav>
      <a href="#">Home</a>
      <a href="#">About SCC</a>
      <a id="active-link" href="#">Rare Coffees</a>
      <a href="#">Store</a>
      <a href="#">Contact us</a>
    </nav>
  </header>

  <!-- Content Wrap -->
  <div class="content-wrap">
    
    <!-- Content Container -->
    <section class="content-container">
      <h2>Rare Coffees</h2>
      <h3>Kopi Luwak</h3>
        <figure>
          <img src="https://www.indoneo.com/wp-content/uploads/2017/03/luwak_coffee_for_sale.jpg" alt="Kopi Luwak Coffee">
          <figcaption><i>Kopi luwak for sale in Indonesia.</i></figcaption>
        </figure>  
      <blockquote>"It’s the world’s most expensive coffee, and it’s made from poop. Or rather, it’s made from coffee beans that are partially digested and then pooped out by the civet, a catlike creature. A cup of kopi luwak, as it’s known, can sell for as much as $80 in the United States."</blockquote>
     <p><cite>The Disturbing Secret Behind the World’s Most Expensive Coffee</cite> by Rachael Bale. <a href="http://www.nationalgeographic.com/">National Geographic</a>. <time>April 29, 2016</time></p>

    <!-- End Content Container -->
    </section>

  <!-- End Content Wrap -->
  </div>
  
  <!-- Push for Sticky Footer -->
  <div class="push"></div>

  <!-- End Sticky Footer Wrapper -->
  </div>

  <footer>
    <nav id="top-row">
      <a href="#">Locations</a>
      <a href="#">Press</a>
      <a href="#">Blog</a>
      <a href="#">Jobs</a>
      <a href="#">FAQ</a>
    </nav>
    <nav id="bottom-row">
      <a href="#">Sustainability</a>
      <a href="#">Contact</a>
    </nav>
    <p>Speciality Coffee Company, Torokv&eacutesz &uacutet 95-97, Budapest</p> 
  </footer>

</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题