如何使用HTML、JavaScript或CSS移除网页空白边距？

页面出现空白边距主要是浏览器默认给<html>、<body>元素设置了margin/padding，同时iframe自带默认边框和行内元素间距导致的，按以下方式修改代码即可解决：

<html>
<head>
    <style>
        /* 清除根元素默认边距 */
        html, body {
            margin: 0;
            padding: 0;
            overflow: hidden; /* 可选：避免两个100vh高度的iframe导致页面出现滚动条 */
        }
        /* 重置iframe样式 */
        iframe {
            border: none;
            margin: 0;
            padding: 0;
            display: block; /* 消除行内元素带来的底部空白 */
        }
    </style>
</head>
<body>
    <iframe id="i1" src="yoursource1.html" width="100%" style="height:100vh"></iframe>
    <iframe id="i2" src="yoursource2.html" width="100%" style="height:100vh"></iframe>
</body>
<html>

关键修改说明： #

• html, body { margin: 0; padding: 0; }：直接清除浏览器默认的内外边距，这是页面四周空白的核心原因。
• iframe { display: block; }：iframe默认是行内块元素，会带有少量底部间距，设为块级元素可消除这个问题。
• border: none;：移除iframe默认的灰色边框，避免额外视觉空隙。
• overflow: hidden;：如果不需要页面滚动条，加上这个可以隐藏两个高100vh的iframe叠加后超出视口的部分，按需选择即可。

内容的提问来源于stack exchange，提问作者Daniel Figueiredo