白色空間從哪裏來？

-4

我有一大塊白色空間，我似乎無法從我正在處理的網站中刪除，並且它使我瘋狂。它的權利在頁面的頂部。白色空間從哪裏來？

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#container { 
 
    width: 100%; 
 
    background-color: #c3c3c3; 
 
} 
 
#main-header { 
 
    position: fixed; 
 
    width: 100%; 
 
    background-color: black; 
 
    color: white; 
 
    margin: 0; 
 
} 
 
h1 { 
 
    float: left; 
 
    margin: 0.5% 0.5% 0.5% 4%; 
 
} 
 
#main-header nav {} nav ul li { 
 
    display: inline; 
 
}

<body> 
 
    <div id="container"> 
 
    <header id="main-header"> 
 
     <h1>DEdesigns</h1> 
 
     <nav> 
 
     <ul> 
 
      <li><a href="#">Home</a> 
 
      </li> 
 
      <li><a href="#">About</a> 
 
      </li> 
 
      <li><a href="#">Services</a> 
 
      </li> 
 
      <li><a href="#">Contact</a> 
 
      </li> 
 
     </ul> 
 
     </nav> 
 
    </header> 
 
    <!-- end header --> 
 
    <article id="about-me"> 
 
     <header> 
 
     <h2>About Me</h2> 
 
     </header> 
 
     <section> 
 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
 
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</p> 
 
     </section> 
 
     <aside> 
 
     <figure> 
 
      <img src="#" alt="#" width="#" height="#"> 
 
     </figure> 
 
     </aside> 
 
    </article> 
 
    <!-- end #about-me --> 
 
    <div id="gallery"> 
 
     <header> 
 
     <h2>My Work</h2> 
 
     </header> 
 
     <div id="gallery-conatiner"> 
 
     <figure> 
 
      <img src="#" alt="#" width="#" height="#"> 
 
     </figure> 
 
     <section> 
 
      <aside> 
 
      <p>rem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500</p> 
 
      </aside> 
 
     </section> 
 
     <!-- ends first row --> 
 
     <section> 
 
      <aside> 
 
      <p>rem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500</p> 
 
      </aside> 
 
     </section> 
 
     <figure> 
 
      <img src="#" alt="#" width="#" height="#"> 
 
     </figure> 
 
     <!-- ends second row --> 
 
     <figure> 
 
      <img src="#" alt="#" width="#" height="#"> 
 
     </figure> 
 
     <aside> 
 
      <p>rem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500</p> 
 
     </aside> 
 
     </section> 
 
     <!-- ends third row --> 
 
     </div> 
 
    </div> 
 
    <!-- end #gallery --> 
 
    <article id="services"> 
 
     <header> 
 
     <h2>Services</h2> 
 
     </header> 
 
     <section> 
 
     <ol> 
 
      <li>one</li> 
 
      <li>two</li> 
 
      <li>three</li> 
 
     </ol> 
 
     </section> 
 
    </article> 
 
    <!-- end #services --> 
 
    <article id="contact-me"> 
 
     <header> 
 
     <h2>Contact Me</h2> 
 
     </header> 
 
     <p>some contact me stuff goes here</p> 
 
    </article> 
 
    <!-- end #contact-me --> 
 
    <footer> 
 
     <p>This is my fotter</p> 
 
    </footer> 
 
    </div> 
 
    <!-- end #container --> 
 
</body>

在此先感謝

來源

2014-12-04 DEdesigns57

添加top: 0到#main-header。

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#container { 
 
    width: 100%; 
 
    background-color: #c3c3c3; 
 
} 
 
#main-header { 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    background-color: black; 
 
    color: white; 
 
    margin: 0; 
 
} 
 
h1 { 
 
    float: left; 
 
    margin: 0.5% 0.5% 0.5% 4%; 
 
} 
 
#main-header nav {} nav ul li { 
 
    display: inline; 
 
} 
 
#about-me { 
 
    position: relative; 
 
    margin-top: 39px; 
 
    padding-top: 5px; 
 
}

<body> 
 
    <div id="container"> 
 
    <header id="main-header"> 
 
     <h1>DEdesigns</h1> 
 
     <nav> 
 
     <ul> 
 
      <li><a href="#">Home</a> 
 
      </li> 
 
      <li><a href="#">About</a> 
 
      </li> 
 
      <li><a href="#">Services</a> 
 
      </li> 
 
      <li><a href="#">Contact</a> 
 
      </li> 
 
     </ul> 
 
     </nav> 
 
    </header> 
 
    <!-- end header --> 
 
    <article id="about-me"> 
 
     <header> 
 
     <h2>About Me</h2> 
 
     </header> 
 
     <section> 
 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
 
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</p> 
 
     </section> 
 
     <aside> 
 
     <figure> 
 
      <img src="#" alt="#" width="#" height="#"> 
 
     </figure> 
 
     </aside> 
 
    </article> 
 
    <!-- end #about-me --> 
 
    <div id="gallery"> 
 
     <header> 
 
     <h2>My Work</h2> 
 
     </header> 
 
     <div id="gallery-conatiner"> 
 
     <figure> 
 
      <img src="#" alt="#" width="#" height="#"> 
 
     </figure> 
 
     <section> 
 
      <aside> 
 
      <p>rem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500</p> 
 
      </aside> 
 
     </section> 
 
     <!-- ends first row --> 
 
     <section> 
 
      <aside> 
 
      <p>rem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500</p> 
 
      </aside> 
 
     </section> 
 
     <figure> 
 
      <img src="#" alt="#" width="#" height="#"> 
 
     </figure> 
 
     <!-- ends second row --> 
 
     <figure> 
 
      <img src="#" alt="#" width="#" height="#"> 
 
     </figure> 
 
     <aside> 
 
      <p>rem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500</p> 
 
     </aside> 
 
     </section> 
 
     <!-- ends third row --> 
 
     </div> 
 
    </div> 
 
    <!-- end #gallery --> 
 
    <article id="services"> 
 
     <header> 
 
     <h2>Services</h2> 
 
     </header> 
 
     <section> 
 
     <ol> 
 
      <li>one</li> 
 
      <li>two</li> 
 
      <li>three</li> 
 
     </ol> 
 
     </section> 
 
    </article> 
 
    <!-- end #services --> 
 
    <article id="contact-me"> 
 
     <header> 
 
     <h2>Contact Me</h2> 
 
     </header> 
 
     <p>some contact me stuff goes here</p> 
 
    </article> 
 
    <!-- end #contact-me --> 
 
    <footer> 
 
     <p>This is my fotter</p> 
 
    </footer> 
 
    </div> 
 
    <!-- end #container --> 
 
</body>

來源

2014-12-04 19:27:34

哇，謝謝。爲什麼這項工作確切嗎？ – DEdesigns57 2014-12-04 19:29:20

@ DEdesigns57 - 因爲如果您在將'position'設置爲'absolute'或'fixed'時未指定'top'或'left'，則該元素將顯示最初出現在文檔流中的位置。 – 2014-12-04 19:34:12

你應該記住，這仍然會削減你的內容的頂部。因此，您需要爲容器頂部額外添加一個「邊距」或「填充」。我在上面的答案中提出了一個編輯。 – Felix 2014-12-04 19:45:04

白色空間從哪裏來？

回答

相關問題