为何设置top:0无法将元素顶部对齐屏幕顶端？

尝试将video元素置于屏幕顶端，设置top: 0后并未完全对齐，元素与页面边缘间仍存在一小段空隙。

代码如下：

<style>
    video {
        top: 0;
        height: 746px;
    }
</style>

<video controls>
    <source src="wheel/wheel.mp4" type="video/mp4">
</video>

截图：
video顶端与页面边缘存在空隙

出现空隙的核心原因是浏览器默认给body元素设置了margin值，同时video元素作为块级元素，也会受页面默认样式影响。可以通过以下几种方案解决：

• 直接重置body的默认margin：

body {
    margin: 0;
}

• 若需要video脱离文档流固定在顶端，给元素添加绝对定位并设置左右偏移：

video {
    position: absolute;
    top: 0;
    left: 0;
    height: 746px;
    /* 可选：设置width:100%让视频铺满宽度 */
    width: 100%;
}

• 全局重置所有元素的默认边距（适合项目初期统一样式）：

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

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