无法摆脱在子div和其父div的底部之间分隔的较小水平空间

问题描述 投票:0回答:1

我的.portfolio div和#ourwork div的底部之间有一个非常烦人的空白。我尝试使用检查器工具查看是否有要删除的边距,无论我将鼠标悬停在附近的区域有多少,都找不到。这也是我第一次尝试用HTML / CSS编写严重的代码,因此,如果你们在此过程中发现任何不当之处,请指出来,我将永远感激不已。

干杯!

这是我的代码:

* {
  margin: 0;
  padding: 0
}

.services-center,
.services-left,
.services-right,
.img-holder {
  float: left
}

.portfolio,
#navigation li,
.logo,
#services,
.services-wrapper,
.ourwork-title,
.service,
.portfolio,
.service p {
  display: inline-block
}

#navigation,
#home,
#services,
#ourwork,
.img-holder img {
  width: 100%
}

#home,
#navigation ul,
#ourwork {
  text-align: center
}

hr {
  margin: auto
}


/* -----------------------------Scroll Bar------------------------------------ */

 ::-webkit-scrollbar {
  width: 6px
}

 ::-webkit-scrollbar-track {
  background-color: transparent
}

 ::-webkit-scrollbar-thumb {
  background: #b3404a;
  border-radius: 20px
}


/* -------------------------------Navigation Bar---------------------------------------- */

#navigation {
  background-color: rgba(56, 58, 60, .90);
  overflow: auto;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0
}

#navigation li {
  margin: 1% 2.5%;
  padding: 1%;
  text-transform: uppercase;
  list-style-type: none;
  letter-spacing: 2px;
  font-size: 14.5px;
  font-family: Oswald;
  font-weight: 600;
  color: #f6f6f6
}

#navigation li:hover {
  color: #b3404a
}


/* -------------------------------First Section - Big Background---------------------------------------- */

#home {
  background-image: url(images/backgrounds/background1.jpg);
  background-attachment: fixed;
  background-size: cover;
  float: left;
  width: 100%
}


/* ---------------------------------Text Logo----------------------------------- */

.logo {
  margin-bottom: 45%;
  margin-top: 11%
}

.logo h1 {
  margin: -1%;
  font-size: 75px;
  padding: 2px;
  letter-spacing: 3px;
  font-family: Oswald;
  text-transform: uppercase;
  color: #f6f6f6
}

.logo h3 {
  border: 3px solid #f6f6f6;
  margin: 0;
  font-size: 26px;
  letter-spacing: 3px;
  font-family: Oswald;
  color: #f6f6f6
}


/* ---------------------------------Social Media Buttons-------------------------------------- */

.social-media img {
  margin: 1% 2%
}

#home .social-media {
  margin-bottom: 2.3%
}


/* --------------------------------Services Backgroud--------------------------------------- */

#services {
  background: rgba(56, 58, 60, .98)
}


/* --------------------------------- Services Title and Line Break------------------------------------- */

.services-title {
  margin-top: 2.7%;
  margin-bottom: 3.6%
}

.services-title h1 {
  text-transform: uppercase;
  font-size: 33px;
  letter-spacing: 5px;
  margin-top: 0;
  font-family: Oswald;
  color: #f6f6f6
}

.services-title hr {
  width: 5%;
  margin-top: 2%;
  border-radius: 25px;
  border: 2.5px solid #b3404a
}


/* ------------------------------Services-------------------------------------- */

.services-wrapper {
  width: 60%;
  margin-bottom: 4%
}

.service {
  width: 33.3333333%
}

.service img {
  border: 4px solid #b3404a;
  border-radius: 45px;
  padding: 25px
}

.service h3 {
  font-size: 22px;
  letter-spacing: 3.5px;
  margin: 12px 4%;
  text-transform: uppercase;
  font-weight: 400;
  font-family: Oswald;
  color: #f6f6f6
}

.service hr {
  width: 13%;
  border-radius: 25px;
  border: 2px solid #b3404a;
  margin-bottom: 8%
}

.service p {
  margin-top: 0;
  font-size: 1em;
  width: 50%;
  font-weight: 100;
  font-family: Source Sans Pro;
  color: #f6f6f6
}


/* -----------------------------Our Works Background------------------------------------ */

#ourwork {
  background-color: #f6f6f6
}


/* -----------------------------Our Works Title and Sub Title and Line Break------------------------------------ */

.ourwork-title {
  margin-bottom: 3%;
  margin-right: 3%;
  margin-top: 0;
  padding-top: 1.1%
}

.ourwork-title h1 {
  text-transform: uppercase;
  font-size: 33px;
  letter-spacing: 5px;
  color: #383a3c;
  margin-bottom: 0;
  font-family: Oswald
}

.ourwork-title hr {
  margin-top: 4%;
  margin-bottom: 0;
  width: 20%
}

.ourwork-title h3 {
  color: #383a3c;
  font-family: Source Sans Pro;
  font-size: 18px;
  font-weight: 300;
  margin-top: 4%
}


/* -----------------------------Portfolio and the Images Inside------------------------------------ */

.portfolio {
  width: 70%;
  margin: auto 4%
}

.img-holder {
  margin: 0;
  width: 33.3333%
}

.img-holder img {
  display: block;
  height: 100%
}


/* -------------------------------Second section - background---------------------------------------- */

#aboutus {
  background-image: url(images/backgrounds/background2.jpg);
  background-attachment: fixed;
  background-size: cover;
  width: 100%;
  height: 700px;
  float: left
}
<!DOCTYPE html>
<html>

<head>
  <title>Vintage Car Shop</title>
  <link rel="stylesheet" type="text/css" href="css.css">
  <link href="https://fonts.googleapis.com/css?family=Oswald|Source+Sans+Pro&display=swap" rel="stylesheet">

</head>

<body>

  <div id="navigation">
    <ul>
      <a href="#home">
        <li>HOME</li>
      </a>
      <a href="#services">
        <li>SERVICES</li>
      </a>
      <a href="#ourwork">
        <li>OUR WORK</li>
      </a>
      <a href="#aboutus">
        <li>ABOUT US</li>
      </a>
      <a href="">
        <li>CONTACT</li>
      </a>
    </ul>
  </div>

  <div id="home">

    <div class="logo">
      <h1>jade & andy</h1>
      <h3>vintage car specialists</h3>
    </div>

    <div class="social-media">
      <a href=""><img src="images/icons/facebook.png"></a>
      <a href=""><img src="images/icons/twitter.png"></a>
      <a href=""><img src="images/icons/instagram.png"></a>
    </div>

    <div id="services">

      <div class="services-title">
        <h1>services</h1>
        <hr>
      </div>

      <div class="services-wrapper">

        <div class="service services-left">
          <img src="images/icons/wave.png">
          <h3>wave</h3>
          <hr>
          <p>
            Charity donate decathlon champion waxy gurn hold steady keyboardist glorious facial hair? Iron tache testosterone trophy.
          </p>
        </div>

        <div class="service services-center">
          <img src="images/icons/radio.png">
          <h3>radio</h3>
          <hr>
          <p>
            Dolor sit amet tricky sneezes mark lawrenson tom selleck, tom selleck mr frothy-top tricky sneezes mark lawrenson dolor.
          </p>
        </div>

        <div class="service services-right">
          <img src="images/icons/cpu.png">
          <h3>cpu</h3>
          <hr>
          <p>
            Fox hunting soup strainer cesar romero jolly good show waxy gurn, lorreto del mar soup strainer jolly good show imperial.
          </p>
        </div>

      </div>

    </div>

    <div id="ourwork">

      <div class="ourwork-title">
        <h1>our work</h1>
        <hr>
        <h3>A collection of cars we've renovated with passion</h3>
      </div>

      <div class="portfolio">

        <div class="img-holder">
          <img src="images/ourwork/example1.jpg">
        </div>

        <div class="img-holder">
          <img src="images/ourwork/example2.jpg">
        </div>

        <div class="img-holder">
          <img src="images/ourwork/example3.jpg">
        </div>

        <div class="img-holder">
          <img src="images/ourwork/example4.jpg">
        </div>

        <div class="img-holder">
          <img src="images/ourwork/example5.jpg">
        </div>

        <div class="img-holder">
          <img src="images/ourwork/example6.jpg">
        </div>

      </div>

    </div>

  </div>

  <div id="aboutus">

  </div>

</body>

</html>

enter image description here

我有一个非常烦人的空白,将我的.portfolio div和#ourwork div的底部隔开。我尝试使用检查器工具查看是否有要删除的边距并且找不到...

html css
1个回答
0
投票

我发现了水平空间的来源。显然,.portfolio应该更改为display:block,并将边距设置为margin:auto以使其居中。

© www.soinside.com 2019 - 2024. All rights reserved.