页面莫名出现内边距？HTML基础代码问题排查求助

你遇到的空白是浏览器默认样式导致的：

• 所有浏览器都会给<body>标签默认设置margin: 8px，这就是灰色盒子两侧和顶部空白的来源
• 你给灰色盒子设了width:100%，但这个宽度是相对于<body>的内容宽度计算的，加上<body>本身的margin，盒子自然会比视口窄，出现两侧空白
• 顶部的额外空白还和<p>标签的默认margin有关：因为父元素.sticky_square没有设置padding或border，p标签的margin会“穿透”父元素，把盒子往下推

修复后的代码 #

直接重置浏览器默认样式，同时修正代码结构（样式应该放在<head>内部，符合规范）：

<html lang="fr">
<head>
    <link rel="icon" href="images/tarkov icon.png">
    <title>THIS IS A TEST</title>
    <meta charset="utf-8"/>
    <style>
        :root {
            --bgcolor: #101B20;
        }
        /* 清除所有元素默认的margin和padding */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html {
            background-color: var(--bgcolor);
            width: 100%;
            height: 100%;
        }
        p {
            font-size: 16px;
            color: #FFFFFF;
            font-family:'Open Sans', sans-serif;
            text-align: center;
        }
        .sticky_square {
          height: 50px;
          width: 100%;
          background-color: #808080;
          /* 可选：让内部文字垂直居中 */
          display: flex;
          align-items: center;
          justify-content: center;
        }
    </style>
</head>

<body>
    <div class="sticky_square">
        <p>txt</p>
    </div>
    <p>txt2</p>
</body>
</html>

关键说明 #

• * { margin:0; padding:0; } 直接清除所有元素的默认边距，彻底解决来源不明的空白
• box-sizing: border-box 让元素的宽度计算包含padding和border，避免后续布局出现宽度溢出问题

内容的提问来源于stack exchange，提问作者the shadow