如何摆脱页面边缘的空白？

Question

如何摆脱页面边缘的空白？

我已经为身体和两个div设置了边框,填充和边距为0px.但我似乎还是无法摆脱这种差距.

#body{
 padding: 0px ;
 border:0px ; 
margin:0px;
width:100%;
height:100vh;
}


#mainPage {
height:100vh;
width:100%;
background-color: #2469ff;
padding: 0px;
border:0px; 
margin:0px;
}

#navBar{

height:70px; 
width:100%;
Background-color: #1f1f1f;  
padding: 0px ;
border:0px ; 
margin:0px;
}

Run Code Online (Sandbox Code Playgroud)

到目前为止,这都是我的CSS.

这是我的HTML.这是非常基本的.

<html>  
     <head>    
     <title>
     Ice Arena
     </title>          
     </head>    
     <body>       
          <div id="mainPage">       
              <div id="navBar">      
              </div>  
              <div id="leftPanel">      
              </div>   
          </div>    
     </body>
</html>

Run Code Online (Sandbox Code Playgroud)

正如我所说,我不知道为什么会这样做.我确定我犯了一个错误,我仍然是CSS和HTML的初学者.

Answer 1

Dal*_*ang 5

使用以下命令删除默认边距body：

html,
body {
  margin: 0;
}

Run Code Online (Sandbox Code Playgroud)

我强烈建议您阅读以下内容：

HTML 元素的默认 CSS 值

body [ display: block;的默认 CSS 值边距：8px；]

html,
body {
  margin: 0;
}

Run Code Online (Sandbox Code Playgroud)

#body {
  padding: 0px;
  border: 0px;
  margin: 0px;
  width: 100%;
  height: 100vh;
}

#mainPage {
  height: 100vh;
  width: 100%;
  background-color: #2469ff;
  padding: 0px;
  border: 0px;
  margin: 0px;
}

#navBar {
  height: 70px;
  width: 100%;
  Background-color: #1f1f1f;
  padding: 0px;
  border: 0px;
  margin: 0px;
}

html,
body {
  margin: 0;
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，5 月前
查看次数：	144 次
最近记录：	8 年，5 月前