如何摆脱我网页顶部的空白处？

我已经试过的CSS重置，除去<p>标签，改变<body>，<html>，并且<div>利润率，似乎没有任何工作。

<html> 
    <head> 
     <title>Title</title><meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <style> 
      html, body { 
       margin: 0; 
       padding: 0; 
      } 

      #container { 
       background-color: black; 
       color: white; 
       width: 800px; 
       margin-top: 0px; 
       margin-bottom: 0px; 
       margin-left: auto; 
       margin-right: auto; 
      } 
      #inner-container { 
       margin: 10px 10px 10px 10px; 
      } 
      p { 
       margin-top: 0px; 
      } 

     </style> 
    </head> 
    <body><div id="container"><div id="inner-container"> 
        <p>Body Text</p> 
      </div></div></body></html>

来源

2015-04-15 John Tippin

您的空白符来自＃inner-container上10px的顶部边距。看到这个JSFiddle的顶部边距改为0px：https://jsfiddle.net/rcz6ksft/。

#inner-container { 
    margin: 0px 10px 10px 10px; 
}

来源

2015-04-15 23:20:19 JBzd

我的猜测是你意味着＃内部容器具有填充扩大黑色的背景，而不是，还有，代替偏移整个元素？ – JBzd

您将需要删除子元素的边距，因为如果它们靠近网站的边缘，它们将创建白色间隙。我已经将边距更新为填充，这将创建相同的效果，但元素将跨越页面的边缘。

  html, body { 
 
       margin: 0; 
 
       padding: 0; 
 
      } 
 

 
      #container { 
 
       background-color: black; 
 
       color: white; 
 
       width: 800px; 
 
       margin-top: 0px; 
 
       margin-bottom: 0px; 
 
      } 
 
      #inner-container { 
 
       padding: 10px 10px 10px 10px; 
 
      } 
 
      p { 
 
       margin-top: 0px; 
 
      }

<div id="container"> 
 
    <div id="inner-container"> 
 
     <p>Body Text</p> 
 
    </div> 
 
</div>

来源

2015-04-15 23:20:31

如何摆脱我网页顶部的空白处？

回答

相关问题