html - H1 在标题和页面顶部之间留出空间/间隙

标签 html css

<分区>

我有一个问题,我的 h1 标签与我的页面顶部分开 - 像这样:enter image description here

我对 HTML 和 CSS 还是很陌生,所以我请求你的帮助。此外,我确实环顾四周以查看有关此的其他帖子,并且我已经尝试了很多,但我似乎无法让它工作。

这是我的 CSS 和 HTML:

html {
    height: 100%;
    width: 100%;
}

body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

.header{
   background: url("../images/artboard1.jpg") no-repeat top center fixed;
   background-size: cover;
   height: 100vh;
   width: 100%;
   margin: 0;
   padding: 0;
}

#logo {
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    float: left;
    padding-left: 40px;
    padding-top: 35px;
    margin: 0;
}

nav {
  float: right;
  padding-top: 40px;
  padding-right: 40px;
  margin: 0;
}
  a {
    color: #ffffff;
    font-weight: 400;
    font-size: 80%;
    text-decoration: none;
    margin: 0 auto;
    padding-left: 3rem;
}

.content_top {
  margin: 0;
  margin-top: 260px;
  padding: 4rem 0 8rem 0; }
  .sub_title, .under_title {
    color: #ffffff;
    text-align: center;
  }

  .sub_title {
    font-weight: 400;
    font-size: 0.85rem;
    padding: 0 0 5px 0;
    margin: 0;
  }

  .logo_middle {
    display: block;
    margin: 0 auto;
  }

  .under_title {
    font-weight: 400;
    font-size: 0.85rem;
    padding: 5px 0 5px 0;
    margin: 0;
  }

.content {
    background: url(../images/Untitled-2.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #0D0E12;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.projekter {
  background-color: #0D0E12;
  margin: 0 auto;
  padding 0 auto;
}
<html>
  <head>
    <title>Jakob Hoeg</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=0">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
  </head>

  <body>

    <div class="header">
      <header>
        <a href="index.html"><img id="logo" src="images/logo_top.png" draggable="false"/>
        <nav>
          <a href="#">HJEM</a>
          <a href="#">PORTFOLIO</a>
          <a href="#">KONTAKT</a>
        </nav>

        <div class="content_top">
          <h4 class="sub_title">HEY, MIT NAVN ER</h4>
          <img class="logo_middle" src="images/logo_big.png" draggable="false"/>
          <h4 class="under_title">MULTIMEDIEDESIGN STUDERENDE</h4>
        </div>
      </header>

    </div>

    <section class="content">
      <div id="content_cont">
        <h1>Hello</h1>
      </div>
    </section>

    <section class="projekter">
      <div id="projekter">
        <h1>Hello</h1>
      </div>
    </section>

  </body>
</html>

最佳答案

嘿,这是一个非常有趣的效果——“边距坍塌”。 h1 有默认的 margin-top

Parent and first/last child

If there is no border, padding, inline content, or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

要解决此问题,请将 padding-top 添加到容器中或将 header margin-top 替换为 padding-top。也可以将h1 margin-top设置为0。

您可以阅读更多相关信息 here .

关于html - H1 在标题和页面顶部之间留出空间/间隙,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39617187/

相关文章:

html - 带下拉菜单的搜索栏不起作用

jquery - 如果选中复选框,如何禁用每行的输入字段?

javascript - 显示响应式设计 :none

asp.net - .net 下拉列表对齐文本

html - 以横向模式从 HTML 打印 SVG

javascript - 使下拉框适合在没有相对位置的包装内

html - CSS 初学者,帮助创建此布局?

jquery - 相关类显示

html - CSS淡入背景图像

php - 制作响应式页面时 jquery.min 文件冲突