如何消除页面边缘的空白间隙？

Question

如何消除页面边缘的空白间隙？

4

我已经将body和两个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;
}

这是我目前的CSS。

这是我的HTML，目前非常基础。

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

正如我所说，我不知道为什么会这样。我相信我犯了一个错误，因为我在CSS和HTML方面还是新手。

- Musty

1

欢迎来到StackOverflow！请同时发布您的html代码 :) - threeFatCat

6个回答

2

将Div的CSS参数设置如下： margin: 0 auto; 这将使你的边距居中。

- CodePlague

2

这个问题的解决方案非常简单。只需从“body”中删除井号（#），就像这样：

    body{.....}

永远不需要使用井号来表示唯一的HTML标签。

- bestwebdevs

2

添加以下CSS margin 重置：

html,
body {
    margin: 0;
}

Snippet below:

html,
body {
  margin: 0;
}

#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;
}

<body>
  <div id="mainPage">
    <div id="navBar">
    </div>
    <div id="leftPanel">
    </div>
  </div>
</body>

- Syden

1

添加HTML和BODY的样式。

html, body{
 padding: 0px ;
 border:0px ; 
 margin:0px;
 width:100%;
 height:100%;
}

- ATerry

1

在你的CSS中，将#body前面的#号去掉。

你的CSS应该是...

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

- Axion

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dalin Huang · Accepted Answer

使用以下代码来去除 body 的默认 margin:

html,
body {
  margin: 0;
}

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

HTML元素的默认CSS值

默认的CSS值为body[显示：块；边距：8像素；]

#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;
}

<html>

<head>
  <title>
    Ice Arena
  </title>
</head>

<body>
  <div id="mainPage">
    <div id="navBar">
    </div>
    <div id="leftPanel">
    </div>
  </div>
</body>

</html>