HTML Banner无法与页面顶部对齐的问题求助

问题根源是浏览器默认给<h4>标签设置了外边距，触发了外边距折叠（Margin Collapse）：Banner容器里的h4的margin-top会和父容器（#Banner）的外边距合并，把整个Banner往下顶，导致无法和页面顶部对齐。

直接用下面两种方法就能解决，不会破坏跨平台兼容性：

方法1：清除h4的默认外边距 #

修改CSS中#BannerText的样式，添加margin: 0;清除默认外边距：

h1, p, #BannerText {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
    margin: 0; /* 新增此行清除默认外边距 */
}

方法2：触发BFC阻止外边距折叠 #

给#Banner添加overflow: hidden;，让容器形成独立的块格式化上下文，避免和子元素的外边距合并：

#Banner {
    background-color: red;
    width: 100%;
    margin: 0;  
    padding: 0;
    box-sizing: border-box;
    overflow: hidden; /* 新增此行触发BFC */
}

两种方法任选其一即可解决顶对齐问题。

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