爲什麼我改變margin-top時整個頁面會移動？

Question

好的，我從一個教程製作這個網站，是的，我仍然是一個初學者，沒有教程沒有解釋爲什麼會發生這種事情。

基本上，這是發生了什麼，我有這樣的CSS。

@charset "utf-8"; 
/* CSS Document */ 
body { font-family: Arial, Helvetica, sans-serif; } 

.container 
{ 
    width: 800px; 
    margin: 0 auto; 
} 

body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; } 

#main 
{ 
    background: url(images/header.jpg) repeat-x; 
} 

#main .container 
{ 
    background: url(images/shine_04.jpg) no-repeat; 
} 

#logo 
{ 
    background: url(images/logo.png) no-repeat; 
    height:104px; 
    width:301px; 
} 

#logo h1 
{ 
    text-indent: -9999px; 
    margin-top: 40px; 
} 

而我的HTML是這樣的，我只發佈身體。

<div id="main"> 
    <div class="container"> 
    <div id="header"> 
     <div id="logo"> 
     <h1>Logo</h1> 
     </div> 
     <div id="tagline"> 
     <h3>I Love Stuff</h3> 
     </div> 
     <ul id="menu"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Portfolio</a></li> 
     <li><a href="#">Contact</a></li> 
     </ul> 
    </div><!--end header --> 

    <div id="content"> 
    <h2>Lorem ipsum, Dolor sit</h2> 
     <h3>Nullam vulputate felis id odio interdum nec malesuada mi pretium. </h3> 
     <p>Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel. 
      Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl. 
      Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus. 
      Curabitur et ultricies quam. Aenean pretium aliquet velit, gravida vulputate urna tempus vel. </p> 
     <p>Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel. 
      Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl. 
      Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus. Curabitur et ultricies quam. Aenean pretium aliquet velit, 
     gravida vulputate urna tempus vel. Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. </p> 
    <div id="news"> 
     <h3>Latest Updates</h3> 
     <h4>Vestibulum id nulla eu sapien pellentesque</h4> 
     <small>June 1, 2009</small> 
     <p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu, 
      facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales. 
      Etiam laoreet ante in purus laoreet id malesuada dui pretium.<a href="#"> Read More</a></p> 
    <h4>Vestibulum id nulla eu sapien pellentesque</h4> 
    <small>June 1, 2009</small> 
    <p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu, 
     facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales. 
     Etiam laoreet ante in purus laoreet id malesuada dui pretium.<a href="#"> Read More</a></p> 
    </div><!--end news--> 

    </div><!--end content--> 

    <div id="sidebar"> 
    <div id="subscribe"> 
        <h3>Subscribe!</h3> 
        <ul> 
         <li><a href="#">Subscribe via RSS</a></li> 
         <li><a href="#">Get Email Updates</a></li> 
         <li><a href="#">Follow us on Twitter</a></li> 
        </ul> 
       </div> 
       <div id="popular"> 
        <h3>Popular Items</h3> 
        <ul> 
         <li><a href="#">Lorem ipsum dolor site amet</a></li> 
         <li><a href="#">Ulvinar tincidunt, Mauris id</a></li> 
         <li><a href="#">Lorem ipsum dolor site amet</a></li> 
         <li><a href="#">Proin tempor erat sit tene</a></li> 
        </ul> 
       </div> 
       <div id="contributors"> 
        <h3>Contributors</h3> 
        <ul> 
         <li><a href="#">John Smith, freelance writer</a></li> 
         <li><a href="#">Jack McCoy, designer</a></li> 
         <li><a href="#">Lenny Briscoe, editor</a></li> 
         <li><a href="#">John Smith, martketing</a></li> 
        </ul> 
        <a href="#">Join Our Team</a> 
       </div> 



    </div><!--end sidebar--> 

    </div><!--end main container--> 
    </div><!--end main--> 


    <div id="footer"> 
    <div class="container"> 
      <p>Copyright © 2009 MySite <br /> 
      All Rights Reserved</p> 
    </div><!--end footer container--> 

    </div><!--end footer--> 

在CSS，我有#logo H1選擇，因爲你可以從父#logo選擇看，我有一個背景，這是完全的標誌，現在我想那該死的標誌將略有定位40像素從頂部降低，這就是爲什麼我把margin-top: 40px;，我不明白爲什麼，但不是隻有標誌向下移動40px，整個頁面向下移動！ T_T，我已經花了近1個小時試圖推斷出我的大腦在這背後可以處理的所有邏輯，但我只是不能！

而我的問題就像我說的，爲什麼整個頁面向下移動？標誌圖像是應該移動的唯一元素，但爲什麼整個事情呢？我該如何解決它？

Answer 1

嘗試在父容器上使用填充替換邊距：padding-top: 40px，即#header，因爲您已指定#logo的背景圖像，並且不必看到它移動。

爲什麼填充邊距？很簡單：利潤率有崩潰的傾向。 W3C有一個comprehensive section致力於規則邊緣崩潰的規則。

p/s：爲了便於排除故障，請嘗試在JSFiddle上發佈您的問題。它不僅可以幫助社區形象化你的問題，而且還有助於加快實際解決問題的過程。

Answer 2

嘗試

#logo 
{ 
    background: url(images/logo.png) no-repeat; 
    height:104px; 
    width:301px; 
    background-attachment:fixed; 
    background-position: 0px 40px; 
} 

Answer 3

試試這個：

#logo 
{ 
    background:url(images/logo.png) no-repeat; 
    background-position: 0px 40px; 
    height:144px; 
    width:301px; 
}