Question

我遇到一个问题，我的h1标签会从我的页面顶部分开 - 就像这样：enter image description here

我对HTML＆amp; CSS，所以我请求你的帮助。此外，我DID环顾四周看看有关此事的其他帖子，我已经尝试了ALOT，但我似乎无法让它工作。

这是我的CSS＆amp; 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>

Answer 1

你能添加这种风格吗？它会起作用。

#content_cont h1 { margin-top:0; }

Answer 2

嘿，这是一个非常有趣的效果 - “边缘崩溃”。 h1默认为margin-top。

父母和第一个/最后一个孩子

如果没有边框，填充，内联内容或间隙   将块的顶部边缘与其第一个边缘顶部分开   子块，或没有边框，填充，内联内容，高度，   min-height或max-height分隔块的边距底部   从最后一个孩子的边缘底部开始，那些边缘就会崩溃。   折叠的保证金最终在父母之外。

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

您可以详细了解here。

Answer 3

尽量不要为每个物体设置宽度和高度。正如其他答案所说，您可以使用CSS中的边距移动对象。但我担心的是为html，正文，内容添加不必要的样式，如宽度和高度100％......会给你的设计带来一些冲突。

H1在页眉和页面顶部之间留出空隙/间隙

3 个答案: