html - 在页面顶部制作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

“空白”实际上来自您的 <h1>标签，对于 padding 来说太大了在 parent 身上<div> .

代替 padding ，你实际上是想设置一个 margin 在 <div> 上反而。 margin偏移它所应用的元素，而 padding偏移任何子元素(例如 <h1> )，留下带有 padding 的元素原封不动。这可以在 box model 中看到:

简单地交换 margin对于 padding解决问题。

另请注意，您有 <div>而不是 </div></div>在最后。我在下面的示例中更正了这一点:

@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%; 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>