问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vh100，顶部为什么有空隙呢？

头像
红蜻蜓
    9833970
    <!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

    html前端csshtml5css3
    阅读 3.6k
    4 个回答
    得票最新
    头像
    Fractal
      5.5k22433
      <!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;}
      头像
      木夕木夕
        1k1620

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

        头像
        红蜻蜓
          9833970
          <!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

          头像
          眼里you星河
            2
            头像
            fenbox
            6.8k217979
            新手上路，请多包涵

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

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

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

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