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选择器中看到的那样，我有一个背景，这正是徽标，现在我想要该死的徽标位于距离顶部略低40px的位置，这就是为什么我放margin-top: 40px;，我不明白为什么，但不是只有标志向下移动40px，整个页面向下移动！ T_T，我已经花了近1个小时试图推断出我的大脑可以处理的所有逻辑，但我只是不能！

我的问题就像我说的那样，为什么整个页面向下移动？徽标图像是唯一应该移动的元素，但为什么要整个？我该怎么做才能解决它？

Answer 1

尝试在父容器上用填充代替margin 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;
}

当我更改margin-top时，为什么我的整个页面会移动？

3 个答案: