我的.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>
我有一个非常烦人的空白,将我的.portfolio div和#ourwork div的底部隔开。我尝试使用检查器工具查看是否有要删除的边距并且找不到...
我发现了水平空间的来源。显然,.portfolio
应该更改为display:block
,并将边距设置为margin:auto
以使其居中。