如何解决设置body margin为0后页面顶部与HTML内容仍有空白的问题

问题根源 #

页面顶部的空白是浏览器内置默认样式为<h1>标签默认添加的margin-top属性导致的，即便你已经把body和header的边距设为0，h1自带的上外边距会触发外边距折叠，溢出父元素撑开顶部间隙。

解决方案 #

在现有CSS基础上做2处调整即可修复：

1. 给#Title选择器添加margin-top: 0，消除h1默认上外边距
2. 给header选择器添加清除浮动规则，避免浮动元素导致的父元素高度塌陷，影响后续布局

修改后的完整CSS代码如下：

#Logo
{
    float: left;
    border-right: solid;
    border-bottom: solid;
}

#Title
{
    font-size: 70px;
    border-top: solid;
    margin-top: 0; /* 新增：消除h1默认上外边距 */
}

header
{
    margin: 0;
    overflow: auto; /* 新增：清除内部浮动 */
}

body, html {
    margin: 0;
    padding: 0;
}

• 补充：如果要全局消除所有元素的默认边距避免同类问题，可在CSS开头添加如下通用重置规则：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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