如何摆脱页面边缘的空白? [英] How can I get rid of the gap at the edge of the page?

查看:61
本文介绍了如何摆脱页面边缘的空白?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我已经将正文和两个div的边框,填充和边距设置为0px.但是我似乎仍然无法摆脱差距.

I already set the border, padding and margin to 0px for the body and two of my divs. But I still can't seem to get rid of the gap.

#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.

That's all my CSS so far.

这是我的HTML.目前,这是非常基本的.

Here is my HTML. It's very basic at the moment.

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

正如我所说,我不知道为什么要这么做.我确定我弄错了,我仍然是CSS和HTML的初学者.

As I said, I don't know why it's doing this. I'm sure I made a mistake, I'm still a beginner with CSS and HTML.

推荐答案

添加以下CSS margin 重置:

Add the following CSS margin reset:

html,
body {
    margin: 0;
}

以下代码段:

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>

这篇关于如何摆脱页面边缘的空白?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆