时间戳

首页 > 解决方案 > 背景图像前后的空白

html - 背景图像前后的空白

问题描述

即使我将边距和填充设置为 0 并且背景大小设置为“覆盖”，div 的背景图像（它是 div class="content"）的上方和下方也会出现空白。谁能告诉我我做错了什么？

这是页面：

https://sstrudel.github.io/authentic-wood/index.html

HTML：` 

<title>Authentic Wood Countertops</title>
</head>
<body>
 <div class="top-head">

  <div class="quote">Call 760.920.2539 for a free quote</div>

  <a href="https://www.instagram.com/rob_1098/" target="new"><img class="socmed" src="instagram.png" /></a> <a href="https://www.facebook.com/pages/One-Source-Stone/120481204726210" target="new"><img class="socmedfb" src="facebook.png" /></a> <a href="https://twitter.com/OneSourceStone" target="new"><img class="socmed" src="twitter.png" /></ad> <a href="http://www.linkedin.com" target="new"><img class="socmed" src="linkedin.png" /></a></div>

 <div class="header">
    <img class="logo" src="Authentic_Wood_Countertops.png" />
 </div>

 <div class="navbar" id="navbar">
   <label for="show-menu" class="show-menu">Menu</label>
    <input type="checkbox" id="show-menu" role="button">
  <ul id="menu">
   <li><a href="index.html">Home</a></li>
   <li><a href="about.html">About</a></li>
   <li><a href="design-options.html">Design Options</a></li>
   <li><a href="portfolio.html">Portfolio</a></li>
   <li><a href="#">Blog</a></li>
   <li><a href="contact.html">Contact</a></li>
  </ul>

</div>

 <div class="slide-container">
  <div class="slideshow">
  <img class="mySlides" src="Countertop9.jpg">
  <img class="mySlides" src="Countertop9b.jpg">
  <img class="mySlides" src="Countertop10.jpg">
   </div>
 </div>

<div class="maincontent">
Authentic Wood Countertops has been in the business of making beautiful, high quality wood countertops since 2010. As a premier West Coast retailer of wood countertops, Authentic Wood is capable of producing custom, solid wood countertops from over 25 different species of wood in as little as 3 weeks. 
</div>

 <br /><br />
 <hr />

 <div class="content">

  <center><div class="container-2">
  <div><a href="company.html"><img src="company.jpg" width="50%"></a></div>
  <div><a href="warranty.html"><img src="warranty.jpg" width="50%"></a></div>
  <div><a href="testimonials.html"><img src="testimonials.jpg" width="50%"></a></div>
  </div></center>
 </div>

<script>
window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
</script>

<script>
var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 5000); // Change image every 5 seconds
}
</script>

 <hr />

 <div class="footer">
  <div class="footer-links">
   <a href="index.html">Home</a> |
   <a href="about.html">About</a> |
   <a href="design-options.html">Design Options</a> |
   <a href="portfolio.html">Portfolio</a> |
   <a href="#home">Blog</a> |
   <a href="contact.html">Contact</a>
   </div>

    <div class="copyright-closing">
     Site design by <a href="http://samanthastreuli.com">Samantha Streuli</a> <br />
     © 2018 Authentic Wood Countertops</div>
 </div>

</body>
</html>`

CSS：

https://github.com/sstrudel/authentic-wood/blob/master/style.css

标签： htmlcss

解决方案

您的水平规则上有边距。如果您为它们设置样式，则可以消除您遇到的间距问题。

hr {
   margin: 0px;
}

从它的外观来看，虽然我只是将 aborder-top和 a添加border-bottom到您的.container-2div 中，因为这会给您带来与您想要的相同的感觉。如果你走这条路线，你还需要添加填充。您的代码可能如下所示：

.container-2 {
   padding: 10px 0px;
   border-top: 1px solid #000;
   border-bottom: 1px solid #000;
}

推荐阅读