0
我在我的網站頂部有額外的空間，我試圖擺脫。關於我需要在CSS中編輯以擺脫此問題的任何想法？我使用html5up的Overflow主題。我擺脫了頁面的畫廊部分，所以也許這就是爲什麼我有額外的空間？這是我第一個支付項目，所以我非常渴望得到這份工作的正確！我的網站頂部的額外空間
任何幫助將不勝感激！
/* Basic */
\t body {
\t \t background-color: #183026;
\t \t background-image: url("images/overlay.png"), url("../../images/bg.jpg");
\t \t background-repeat: repeat, no-repeat;
\t \t background-size: auto, cover;
\t \t background-position: top left, center 0;
\t \t background-attachment: fixed, fixed;
\t \t font-family: 'Source Sans Pro', sans-serif;
\t \t font-size: 18pt;
\t \t line-height: 1.75em;
\t \t font-weight: 300;
\t \t letter-spacing: 1px;
\t \t color: #3a3939;
\t \t text-shadow: 0 0 0.5px rgba(58, 57, 57, 0.25);
\t \t -webkit-text-stroke: 0.25px;
\t }
\t \t body.is-scroll {
\t \t \t background-attachment: scroll, scroll;
\t \t \t background-size: auto, 100% auto;
\t \t }
\t \t body.is-loading * {
\t \t \t -moz-transition: none !important;
\t \t \t -webkit-transition: none !important;
\t \t \t -ms-transition: none !important;
\t \t \t transition: none !important;
\t \t \t -moz-animation: none !important;
\t \t \t -webkit-animation: none !important;
\t \t \t -ms-animation: none !important;
\t \t \t animation: none !important;
\t \t }
\t input, textarea, select {
\t \t font-family: 'Source Sans Pro', sans-serif;
\t \t font-size: 18pt;
\t \t line-height: 1.75em;
\t \t font-weight: 300;
\t \t letter-spacing: 1px;
\t \t color: #3a3939;
\t \t text-shadow: 0 0 0.5px rgba(58, 57, 57, 0.25);
\t \t -webkit-text-stroke: 0.25px;
\t }
\t h1, h2, h3, h4, h5, h6 {
\t \t font-weight: 400;
\t \t text-transform: uppercase;
\t \t line-height: 1.75em;
\t }
\t h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
\t \t color: inherit;
\t \t text-decoration: none;
\t }
\t h2 {
\t \t font-size: 1.25em;
\t \t letter-spacing: 8px;
\t }
\t h3 {
\t \t font-size: 1em;
\t \t letter-spacing: 5px;
\t }
\t strong, b {
\t \t font-weight: 400;
\t }
\t em, i {
\t \t font-style: italic;
\t }
\t a {
\t \t -moz-transition: border-color 0.35s ease-in-out, color 0.35s ease-in-out;
\t \t -webkit-transition: border-color 0.35s ease-in-out, color 0.35s ease-in-out;
\t \t -ms-transition: border-color 0.35s ease-in-out, color 0.35s ease-in-out;
\t \t transition: border-color 0.35s ease-in-out, color 0.35s ease-in-out;
\t \t color: #35b88f;
\t \t text-shadow: 0 0 0.5px rgba(53, 184, 143, 0.25);
\t \t text-decoration: none;
\t \t border-bottom: dotted 1px rgba(53, 184, 143, 0.5);
\t }
\t \t a:hover {
\t \t \t border-bottom-color: rgba(53, 184, 143, 0);
\t \t }
\t sub {
\t \t position: relative;
\t \t top: 0.5em;
\t \t font-size: 0.8em;
\t }
\t sup {
\t \t position: relative;
\t \t top: -0.5em;
\t \t font-size: 0.8em;
\t }
\t hr {
\t \t border: 0;
\t \t border-top: solid 1px #dad9d9;
\t \t margin: 2em 0 2em 0;
\t }
\t blockquote {
\t \t border-left: solid 0.5em #eae9e9;
\t \t padding: 1em 0 1em 2em;
\t \t font-style: italic;
\t }
\t p, ul, ol, dl, table {
\t \t margin-bottom: 1em;
\t }
\t header {
\t \t margin-bottom: 1em;
\t }
\t \t header p {
\t \t \t display: block;
\t \t \t margin: 0.5em 0 0 0;
\t \t \t padding: 0 0 1.5em 0;
\t \t }
\t footer {
\t \t margin-top: 1em;
\t }
\t br.clear {
\t \t clear: both;
\t }
/* Sections/Article */
\t section, article {
\t \t margin-bottom: 3em;
\t }
\t section > :last-child,
\t article > :last-child,
\t section:last-child,
\t article:last-child {
\t \t margin-bottom: 0;
\t }
\t .row > section, .row > article {
\t \t margin-bottom: 0;
\t }
/* Image */
\t .image {
\t \t display: inline-block;
\t \t border: 0;
\t }
\t \t .image img {
\t \t \t display: block;
\t \t \t width: 100%;
\t \t }
\t \t .image.featured {
\t \t \t display: block;
\t \t \t width: 100%;
\t \t \t margin: 0 0 2em 0;
\t \t }
\t \t .image.fit {
\t \t \t display: block;
\t \t \t width: 100%;
\t \t }
\t \t .image.left {
\t \t \t float: left;
\t \t \t margin: 0 2em 2em 0;
\t \t }
\t \t .image.centered {
\t \t \t display: block;
\t \t \t margin: 0 0 2em 0;
\t \t }
\t \t \t .image.centered img {
\t \t \t \t margin: 0 auto;
\t \t \t \t width: auto;
\t \t \t }
/* List */
\t ul.default {
\t \t list-style: disc;
\t \t padding-left: 1em;
\t }
\t \t ul.default li {
\t \t \t padding-left: 1.5em;
\t \t \t margin-top: 1.5em;
\t \t }
\t \t \t ul.default li:first-child {
\t \t \t \t margin-top: 0;
\t \t \t }
\t ul.icons {
\t \t cursor: default;
\t }
\t \t ul.icons li {
\t \t \t display: inline-block;
\t \t }
\t \t ul.icons a {
\t \t \t display: inline-block;
\t \t \t width: 2.5em;
\t \t \t height: 2.5em;
\t \t \t line-height: 2.5em;
\t \t \t text-align: center;
\t \t \t border: 0;
\t \t }
\t ul.menu {
\t \t cursor: default;
\t }
\t \t ul.menu li {
\t \t \t display: inline-block;
\t \t \t line-height: 1em;
\t \t \t border-left: solid 1px #dad9d9;
\t \t \t padding: 0 0 0 0.5em;
\t \t \t margin: 0 0 0 0.5em;
\t \t }
\t \t \t ul.menu li:first-child {
\t \t \t \t border-left: 0;
\t \t \t \t padding-left: 0;
\t \t \t \t margin-left: 0;
\t \t \t }
\t ul.actions {
\t \t cursor: default;
\t }
\t \t ul.actions li {
\t \t \t display: inline-block;
\t \t \t margin: 0 0 0 0.5em;
\t \t }
\t \t \t ul.actions li:first-child {
\t \t \t \t margin-left: 0;
\t \t \t }
\t ol.default {
\t \t list-style: decimal;
\t \t padding-left: 1.25em;
\t }
\t \t ol.default li {
\t \t \t padding-left: 1.25em;
\t \t \t margin-top: 1.5em;
\t \t }
/* Banner */
\t #banner {
\t \t position: relative;
\t \t color: #fff;
\t \t text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
\t \t text-align: center;
\t \t background: #35b88f url("images/banner.svg") bottom center no-repeat;
\t \t padding: 5em 0 5em 0;
\t \t margin: 0;
\t \t background-size: 125% auto;
\t }
\t \t #banner .button {
\t \t \t color: #35b882;
\t \t \t text-shadow: 0 0 0.5px rgba(53, 184, 130, 0.25);
\t \t }
\t \t #banner header {
\t \t \t margin: 0 0 2em 0;
\t \t }
\t \t \t #banner header h2 {
\t \t \t \t font-weight: 400;
\t \t \t \t font-size: 1.75em;
\t \t \t \t letter-spacing: 8px;
\t \t \t }
\t \t #banner p {
\t \t \t margin: 0;
\t \t }
\t \t #banner footer {
\t \t \t margin: 2em 0 0 0;
\t \t }
\t \t #banner a {
\t \t \t color: inherit;
\t \t \t border-bottom-color: rgba(255, 255, 255, 0.5);
\t \t }
\t \t \t #banner a:hover {
\t \t \t \t border-bottom-color: rgba(255, 255, 255, 0);
\t \t \t }
/* Footer */
\t #footer {
\t \t position: relative;
\t \t color: #fff;
\t \t text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
\t \t text-align: center;
\t \t margin: 4.5em 0 0 0;
\t }
\t \t #footer:after {
\t \t \t content: '';
\t \t \t display: block;
\t \t \t position: absolute;
\t \t \t top: -4.5em;
\t \t \t left: 50%;
\t \t \t height: 4.5em;
\t \t \t border-left: solid 1px #fff;
\t \t }
\t \t #footer a {
\t \t \t color: #fff;
\t \t \t text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
\t \t \t border-bottom-color: rgba(255, 255, 255, 0.5);
\t \t }
\t \t \t #footer a:hover {
\t \t \t \t color: #35b88f;
\t \t \t \t text-shadow: 0 0 0.5px rgba(69, 200, 159, 0.25);
\t \t \t \t border-bottom-color: rgba(53, 184, 143, 0.5);
\t \t \t }
\t \t #footer .icons {
\t \t \t padding: 0.75em 2em 0.75em 2em;
\t \t \t border-radius: 3em;
\t \t \t border: solid 1px #fff;
\t \t \t display: inline-block;
\t \t \t margin: 0 0 3em 0;
\t \t }
\t \t #footer .copyright {
\t \t \t margin: 0 0 9em 0;
\t \t \t font-size: 0.8em;
\t \t }
\t \t /* Header */
\t \t \t #header {
\t \t \t \t padding: 6em 0 6em 0;
\t \t \t }
\t \t \t \t #header header {
\t \t \t \t \t padding-left: 2em;
\t \t \t \t \t padding-right: 2em;
\t \t \t \t }
\t \t \t \t \t #header header h1 {
\t \t \t \t \t \t font-size: 1.75em;
\t \t \t \t \t \t letter-spacing: 6px;
\t \t \t \t \t }
\t \t \t \t #header footer {
\t \t \t \t \t bottom: 4.5em;
\t \t \t \t \t padding: 0 2em 0 2em;
\t \t \t \t }
\t \t \t \t \t #header footer:after {
\t \t \t \t \t \t bottom: -4.5em;
\t \t \t \t \t \t left: 50%;
\t \t \t \t \t \t height: 4.5em;
\t \t \t \t \t }
\t \t \t \t \t #header footer:before {
\t \t \t \t \t \t width: 45px;
\t \t \t \t \t \t height: 33px;
\t \t \t \t \t \t bottom: -2.25em;
\t \t \t \t \t \t margin-left: -22.5px;
\t \t \t \t \t \t margin-bottom: -16.5px;
\t \t \t \t \t \t background-size: 45px 33px;
\t \t \t \t \t }
\t \t /* Banner */
\t \t \t #banner {
\t \t \t \t padding: 3em 2em 3em 2em;
\t \t \t \t background-size: auto 150%;
\t \t \t }
\t \t \t \t #banner header {
\t \t \t \t \t margin: 0 0 1em 0;
\t \t \t \t }
\t \t \t \t \t #banner header h2 {
\t \t \t \t \t \t font-size: 1.5em;
\t \t \t \t \t \t letter-spacing: 6px;
\t \t \t \t \t }
\t \t /* Footer */
\t \t \t #footer .icons {
\t \t \t \t padding: 0.5em 1.25em 0.5em 1.25em;
\t \t \t }
\t \t \t #footer .copyright {
\t \t \t \t font-size: 1em;
\t \t \t \t margin: 0 0 4em 0;
\t \t \t }
\t \t /* Poptrox */
\t \t \t .poptrox-popup .nav-next,
\t \t \t .poptrox-popup .nav-previous {
\t \t \t \t opacity: 1.0;
\t \t \t }
\t \t \t \t .poptrox-popup .nav-next:before,
\t \t \t \t .poptrox-popup .nav-previous:before {
\t \t \t \t \t display: none;
\t \t \t \t }
\t \t \t .poptrox-popup .closer {
\t \t \t \t opacity: 0.5;
\t \t \t }
\t }<!DOCTYPE HTML>
<!--
Overflow by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>The Sunbelt Group</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="assets/css/ie8.css" />
<![endif]-->
<!-- webform.pw -->
<!-- webform.pw
<script> web_form_id = "a9771519-bb14-453d-b997-26d751bc3e79" </script>
<script type="text/javascript"
src="https://webform.pw/client/formclient.nocache.js">
</script>
-->
</head>
<body>
<!-- Header -->
<section id="header">
<header>
<h1><img src="images/sunbeltgrouplogo.png" alt="" /></h1>
</header>
<footer>
<a href="#banner" class="button style2 scrolly-middle">About Us</a>
</footer>
</section>
<!-- Banner -->
<section id="banner">
<header>
<h2>Who We Are</h2>
</header>
<p>The Sunbelt Group is an online business marketer. <br />Our mission: maximize your exposure on the Internet. <br />We work to put your business in front of the greatest number of prospects as possible.</p>
<footer>
<a href="#first" class="button style2 scrolly">Our Services</a>
</footer>
</section>
<!-- Feature 1 -->
<article id="first" class="container box style1 right">
<a href="#" class="image fit"><img src="images/strategyimg.jpg" alt="" /></a>
<div class="inner">
<header>
<h2>Strategic Advertising</h2>
</header>
<!-- Feature 1 -->
<p>Tortor faucibus ullamcorper nec tempus purus sed penatibus. Lacinia pellentesque eleifend vitae est elit tristique velit tempus etiam.</p>
</div>
</article>
<!-- Feature 2 -->
<article class="container box style1 left">
<a href="#" class="image fit"><img src="images/targetmarketimg3bw.jpg" alt="" /></a>
<div class="inner">
<header>
<h2>Targeted Exposure</h2>
</header>
<p>Rhoncus mattis egestas sed fusce sodales rutrum et etiam ullamcorper. Etiam egestas scelerisque ac duis magna lorem ipsum dolor.</p>
</div>
</article>
<!-- Feature 3 -->
<article id="first" class="container box style1 right">
<a href="#" class="image fit"><img src="images/dedicatedsupport.jpg" alt="" /></a>
<div class="inner">
<header>
<h2>Dedicated Support</h2>
</header>
<p>Tortor faucibus ullamcorper nec tempus purus sed penatibus. Lacinia pellentesque eleifend vitae est elit tristique velit tempus etiam.</p>
</div>
</article>
<!-- Contact -->
<article class="container box style3">
<header>
<h2>Connect With Us</h2>
<p>[email protected] <br />
(312) 391-3910
</p>
</header>
<form method="post" action="https://formspree.io/[email protected]">
<div class="row 50%">
<div class="6u 12u$(mobile)"><input type="text" class="text" name="name" placeholder="Name" /></div>
<div class="6u$ 12u$(mobile)"><input type="text" class="text" name="email" placeholder="Email" /></div>
<div class="12u$">
<textarea name="message" placeholder="Message"></textarea>
</div>
<div class="12u$">
<ul class="actions">
<li><input type="submit" value="Send Message" /></li>
</ul>
</div>
</div>
</form>
</article>
<!-- Generic -->
<!--
<article class="container box style3">
<header>
<h2>Generic Box</h2>
<p>Just a generic box. Nothing to see here.</p>
</header>
<section>
<header>
<h3>Paragraph</h3>
<p>This is a subtitle</p>
</header>
<p>Phasellus nisl nisl, varius id <sup>porttitor sed pellentesque</sup> ac orci. Pellentesque
habitant <strong>strong</strong> tristique <b>bold</b> et netus <i>italic</i> malesuada <em>emphasized</em> ac turpis egestas. Morbi
leo suscipit ut. Praesent <sub>id turpis vitae</sub> turpis pretium ultricies. Vestibulum sit
amet risus elit.</p>
</section>
<section>
<header>
<h3>Blockquote</h3>
</header>
<blockquote>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget.
tempus euismod. Vestibulum ante ipsum primis in faucibus.</blockquote>
</section>
<section>
<header>
<h3>Divider</h3>
</header>
<p>Donec consectetur <a href="#">vestibulum dolor et pulvinar</a>. Etiam vel felis enim, at viverra
ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel. Praesent nec orci
facilisis leo magna. Cras sit amet urna eros, id egestas urna. Quisque aliquam
tempus euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia.</p>
<hr />
<p>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra
ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel. Praesent nec orci
facilisis leo magna. Cras sit amet urna eros, id egestas urna. Quisque aliquam
tempus euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia.</p>
</section>
<section>
<header>
<h3>Unordered List</h3>
</header>
<ul class="default">
<li>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel.</li>
<li>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel.</li>
<li>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel.</li>
<li>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel.</li>
</ul>
</section>
<section>
<header>
<h3>Ordered List</h3>
</header>
<ol class="default">
<li>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel.</li>
<li>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel.</li>
<li>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel.</li>
<li>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel.</li>
</ol>
</section>
<section>
<header>
<h3>Table</h3>
</header>
<div class="table-wrapper">
<table class="default">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>45815</td>
<td>Something</td>
<td>Ut porttitor sagittis lorem quis nisi ornare.</td>
<td>29.99</td>
</tr>
<tr>
<td>24524</td>
<td>Nothing</td>
<td>Ut porttitor sagittis lorem quis nisi ornare.</td>
<td>19.99</td>
</tr>
<tr>
<td>45815</td>
<td>Something</td>
<td>Ut porttitor sagittis lorem quis nisi ornare.</td>
<td>29.99</td>
</tr>
<tr>
<td>24524</td>
<td>Nothing</td>
<td>Ut porttitor sagittis lorem quis nisi ornare.</td>
<td>19.99</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"></td>
<td>100.00</td>
</tr>
</tfoot>
</table>
</div>
</section>
<section>
<header>
<h3>Form</h3>
</header>
<form method="post" action="#">
<div class="row">
<div class="6u">
<input class="text" type="text" name="name" id="name" value="" placeholder="John Doe" />
</div>
<div class="6u">
<input class="text" type="text" name="email" id="email" value="" placeholder="[email protected]" />
</div>
</div>
<div class="row">
<div class="12u">
<select name="department" id="department">
<option value="">Choose a department</option>
<option value="1">Manufacturing</option>
<option value="2">Administration</option>
<option value="3">Support</option>
</select>
</div>
</div>
<div class="row">
<div class="12u">
<input class="text" type="text" name="subject" id="subject" value="" placeholder="Enter your subject" />
</div>
</div>
<div class="row">
<div class="12u">
<textarea name="message" id="message" placeholder="Enter your message"></textarea>
</div>
</div>
<div class="row">
<div class="12u">
<ul class="actions">
<li><input type="submit" value="Submit" /></li>
<li><input type="reset" class="style3" value="Clear Form" /></li>
</ul>
</div>
</div>
</form>
</section>
</article>
-->
<section id="footer">
<ul class="icons">
<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon fa-google-plus"><span class="label">Google+</span></a></li>
<li><a href="#" class="icon fa-pinterest"><span class="label">Pinterest</span></a></li>
<li><a href="#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li>
<li><a href="#" class="icon fa-linkedin"><span class="label">LinkedIn</span></a></li>
</ul>
<div class="copyright">
<ul class="menu">
<li>© The Sunbelt Group. All rights reserved.</li>
<li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</section>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.poptrox.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
</body>
</html>
很難讀你這樣的代碼（使用一個片段），但你檢查是否「＃header」的填充造成了差距？ –
非常感謝你的回覆。我嘗試了填充，但似乎沒有做任何事情。對不起，這是我第一次發佈一個問題。我不得不減少我的代碼以適應帖子，因爲我超過了30000字的限制。 – tgk