vh100,顶部为什么有空隙呢?

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style type="text/css">
        body{
            color:white;
            background-color:black;
            margin: 0;
        }
        .box{
            background-color:coral;
            /* border: aliceblue solid 0px; */
            height: 100vh;
            width: 50vw;
        }
    </style>
</head>
<body>
<div class="box">
    <p>端午节快乐!</p>
</div>
</body>
</html>

`### 问题描述
设置box,100vh,上面有空隙,这是怎么造成的。

360截图-207842218.jpg

阅读 3.6k
4 个回答
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style type="text/css">
        body{
            color:white;
            background-color:black;
            margin: 0;
        }
        .fix-margin:before {
            content:'\200B';
            display:block;
            height:0;
            visibility:hidden;
        }
        .box{
            background-color:coral;
            /* border: aliceblue solid 0px; */
            height: 100vh;
            width: 50vw;
        }
    </style>
</head>
<body>
<div class="box fix-margin">
    <p>端午节快乐!</p>
</div>
</body>
html, body {margin:0;padding:0;}

因为 p 标签默认有 margin-top 和 margin-bottom, 如果你想避免这种情况可以查查 reset.css WX20200626-102547.pngWX20200626-115518.png

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style type="text/css">
        html, body{
            color:white;
            background-color:black;
            margin: 0;
            padding: 0;
        }
        .box{
            background-color:coral;
            /* border: aliceblue solid 0px; */
            height: 100vh;
            width: 50vw;
        }
    </style>
</head>
<body>
<div class="box">
    <p>端午节快乐!</p>
</div>
</body>
</html>

QQ截图20200626125945.png

我刚刚也是这个问题,两边有白边
image.png
解决方法是:

*{
    box-sizing: border-box;
     margin:0px;
    padding: 0rem; *//* 解决设置一个width:100%,height: 100%;,可是两边还会留空问题 
}

结果:
image.png
希望能帮到下一个遇到这个问题的人

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题