将div放在页面顶部

Question

我一直在使用HTML和CSS开发网站。

@font-face {
  font-family: NS;
  src: url(https://cdn.getforge.com/rappatic.getforge.io/1513714024/fonts/nsr.ttf);
}

@font-face {
  font-family: PS;
  src: url(https://cdn.getforge.com/rappatic.getforge.io/1513714024/fonts/psr.ttf);
}

@font-face {
  font-family: KR;
  src: url(https://cdn.getforge.com/rappatic.getforge.io/1513714024/fonts/kr.ttf);
}

@font-face {
  font-family: ANR;
  src: url(https://cdn.getforge.com/rappatic.getforge.io/1513714024/fonts/anr.otf)
}

body {
  /*background: linear-gradient(to top right, #FFE259, #FFA751, #FFAF7B);
  background-attachment: fixed;*/
  width: 100%;
  margin: auto;
  height: 100%;
}

p {
  font-family: "ns";
}

h1 {
  font-family: "anr";
}

.white {
  color: #ffffff;
}

.black {
  color: #000000;
}

<div style="width: 100%; background: linear-gradient(to top right, #FFE259, #FFA751, #FFAF7B); background-attachment: fixed;">
  <div style="width: 70%; margin: 3% 15% 0 15%;">
    <h1 class="white" style="font-size: 60px; font-family: KR !important;">Hi, I'm rappatic.</h1>
    <p class="white" style="font-size: 30px; font-family: KR !important; line-height: .0em;">I code when I feel like it.</p>
    <br>
    <div>

如您所见，div上方有一个白色条。更改背景颜色可确认白条实际上是背景的一部分。有没有办法让div保持在页面顶部，所以白条消失了？

Answer 1

＆＃39;空白＆＃39;实际上来自您的<h1>标记，该标记对于父padding上的<div>来说太大了。

而不是 padding ，您实际上希望在<div>上设置 margin 。 margin抵消了应用它的元素，而padding抵消了所有子元素（例如<h1>），使padding的元素保持不变。这可以在 box model ：

中看到

简单地交换margin padding即可解决问题。

另请注意，最后您有<div>而不是</div></div>。我在下面的例子中对此进行了更正：

＆＃13;

＆＃13;

@font-face {
  font-family: NS;
  src: url(https://cdn.getforge.com/rappatic.getforge.io/1513714024/fonts/nsr.ttf);
}

@font-face {
  font-family: PS;
  src: url(https://cdn.getforge.com/rappatic.getforge.io/1513714024/fonts/psr.ttf);
}

@font-face {
  font-family: KR;
  src: url(https://cdn.getforge.com/rappatic.getforge.io/1513714024/fonts/kr.ttf);
}

@font-face {
  font-family: ANR;
  src: url(https://cdn.getforge.com/rappatic.getforge.io/1513714024/fonts/anr.otf)
}

body {
  /*background: linear-gradient(to top right, #FFE259, #FFA751, #FFAF7B);
  background-attachment: fixed;*/
  width: 100%;
  margin: auto;
  height: 100%;
}

p {
  font-family: "ns";
}

h1 {
  font-family: "anr";
}

.white {
  color: #ffffff;
}

.black {
  color: #000000;
}

＆＃13;

<div style="width: 100%; background: linear-gradient(to top right, #FFE259, #FFA751, #FFAF7B); background-attachment: fixed;">
  <div style="width: 70%; padding: 3% 15% 0 15%;">
    <h1 class="white" style="font-size: 60px; font-family: KR !important;">Hi, I'm rappatic.</h1>
    <p class="white" style="font-size: 30px; font-family: KR !important; line-height: .0em;">I code when I feel like it.</p>
    <br>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是因为您在子div <div style="width: 70%; margin: 3% 15% 0 15%;">

上设置的边距

您可以尝试margin: 0% 15% 0 15%;

或将父div设置为position:realtive 和孩子div为position: absolute;

<div style="position:  relative;width: 100vw;height:  80vh;background: linear-gradient(to top right, #FFE259, #FFA751, #FFAF7B);background-attachment: fixed;">
  <div style="width: 70%;position:  absolute;margin: 3% 15% 0 15%;<div style=&quot;width: 70%; margin: 3% 15% 0 15%;&quot;>;<div style=&quot;width: 70%; margin: 3% 15% 0 15%;&quot;>;">
    <h1 class="white" style="font-size: 60px;font-family: KR !important;">Hi, I'm rappatic.</h1>
    <p class="white" style="font-size: 30px; font-family: KR !important; line-height: .0em;">I code when I feel like it.</p>
    <br>
    </div>
</div>

您可以查看此https://jsfiddle.net/reeferblower/zdg0L668/，因为我使用了第二个选项。

**在第二个选项中（使用位置）你需要设置父div的高度，所以子div也会有一个高度（这是因为孩子对于{{1}的父亲是绝对的}}