网页区块顶部留白无法消除？设置body margin:0仍无效

我是HTML/CSS新手，现在碰到个问题：.block1区块顶部有留白，设置body的margin为0没用，但给.block1加1px padding后，留白就没了，完全搞不懂为啥。附上代码和截图，还想请教JS Fiddle怎么用。

相关代码 #

HTML代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css">
    <title>PenguinFlow- We'll Make Your Business Flow.</title>
    <link rel="icon" type="image/x-icon" href="images/pgfavicon.ico"
</head>
<body>
    <div class="block1">
        <img class="company-logo" src="images/Option 3.png">
        <h1 id="title"> We'll Make Your Business <span class="Flow">Flow.</span></h1>
    </div>
    </div>
    
</body>
</html>

CSS代码 #

.block1{
    display: block;
    background: url(images/cute\ penguins.png);
    background-repeat: no-repeat;
    block-size: 1080px;
    padding: 0px;
}
.company-logo{
    width: 140px;
    position: absolute; 
    left: 190px;
}
body{
   margin: 0;
}
#title{
    text-align: center;
    position: relative; top: 150px;
    margin-top: 100px;
    font-size: 50px;
    font-family: UniSansHeavy;
}
.Flow{
    color: rgba(94, 8, 255, 0.664);
    letter-spacing: 2px;
}
@font-face {
    font-family: UniSansHeavy;
    src: url(Uni\ Sans\ Heavy.otf);
}

问题原因：外边距合并（Margin Collapse） #

这是CSS里的外边距合并现象：当块级父元素（.block1）的顶部没有边框、内边距、清除浮动等分隔时，第一个子元素（#title）的margin-top会“溢出”到父元素外面，导致父元素顶部出现留白。你设置body的margin为0没用，因为留白根本不是body的外边距导致的。

给.block1加1px padding后，父元素和子元素之间有了内边距作为分隔，外边距就不会再合并，留白自然消失。

解决方法（任选其一即可） #

• 给.block1添加padding-top: 1px（你已经验证过这个方法有效）
• 给.block1添加border-top: 1px solid transparent（透明边框不影响页面视觉）
• 给.block1设置overflow: hidden，触发BFC（块级格式化上下文），阻止外边距合并
• 把#title的margin-top替换成padding-top，用内边距代替外边距

JS Fiddle 使用方法 #

JS Fiddle是在线编写、调试HTML/CSS/JS代码的工具，操作步骤很简单：

1. 进入工具后，界面分四个核心面板：
   • HTML面板：编写HTML代码，不需要完整的html/head/body标签，工具会自动补全基础结构
   • CSS面板：写页面样式
   • JS面板：写JavaScript逻辑（不需要的话可以空着）
   • Result面板：实时预览代码运行效果
2. 写完代码后，点击右上角的Run按钮，就能在Result面板看到页面效果
3. 点击Save按钮可以保存代码，生成专属链接，方便分享或后续查看
4. 调试时可以用浏览器开发者工具（按F12），和本地开发一样查看元素样式、控制台输出

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