HTML 横幅未正确对齐到页面顶部

Question

代码始终将 div 保持在页面顶部下方，而不影响实际顶部。 div 是页面的第一个。（IDE：VS Code，调试浏览器：MS Edge）

我尝试过的：

添加标签：没有改变任何东西
删除边距+填充：在浏览器中将其设置为空，仍然没有改变任何东西
翻译/转换：破坏跨平台兼容性 ** 代码： HTML：

<!DOCTYPE html>
<html>
    <head>
    <title>AU Programs</title>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="Site Logo.ico">
    </head>
    <body>
        <div id="Banner">
            <header>
            <h4 id="BannerText">FIRST PROJECT WILL BE COMING SOON</h4>
            </header>
        </div>
        <div id="Main">
        <h1>AU Programs</h1>
        <p>Hey! I'm an amateur programmer who loves to create and share projects.</p>
    </div>
        <script></script>
    </body>
</html>

CSS：

html, body {
    margin: 0;
    padding: 0;
    background-color: gray;
    height: 100%;
    box-sizing: border-box;
}

#Banner {
    background-color: red;
    width: 100%;
    margin: 0;  
    padding: 0;
    box-sizing: border-box;  
}

#Image1 {
    width: 200px;
    height: auto;
}

#Projects button {
    display: none;
}

h1, p, #BannerText {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
}

Answer 1

这是

<h4>

元素上的默认边距导致了顶部的空间。只需将该元素的边距设置为零即可。

html, body {
  height: 100%;
}

body {
  margin: 0;
  background-color: gray;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
}

header {
  background-color: red;
}

header h4 {
  margin: 0;
  text-transform: uppercase;
}

<header>
  <h4>First project will be coming soon</h4>
</header>
<main>
  <h1>AU Programs</h1>
  <p>Hey! I'm an amateur programmer who loves to create and share projects.</p>
</main>

HTML 横幅未正确对齐到页面顶部

问题描述投票：0回答：1

1个回答

最新问题

HTML 横幅未正确对齐到页面顶部

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1