html - 这个特定 html 页面上方的空白是什么？

Question

这里我的 div 上方有一个 ~68px 的间隙。给了什么？

.mast_head {
  background: rgba(35, 35, 163, 1);
  background: -moz-linear-gradient(top, rgba(35, 35, 163, 1) 0%, rgba(94, 12, 245, 1) 51%, rgba(112, 210, 245, 1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(35, 35, 163, 1)), color-stop(51%, rgba(94, 12, 245, 1)), color-stop(100%, rgba(112, 210, 245, 1)));
  background: -webkit-linear-gradient(top, rgba(35, 35, 163, 1) 0%, rgba(94, 12, 245, 1) 51%, rgba(112, 210, 245, 1) 100%);
  background: -o-linear-gradient(top, rgba(35, 35, 163, 1) 0%, rgba(94, 12, 245, 1) 51%, rgba(112, 210, 245, 1) 100%);
  background: -ms-linear-gradient(top, rgba(35, 35, 163, 1) 0%, rgba(94, 12, 245, 1) 51%, rgba(112, 210, 245, 1) 100%);
  background: linear-gradient(to bottom, rgba(35, 35, 163, 1) 0%, rgba(94, 12, 245, 1) 51%, rgba(112, 210, 245, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#2323a3', endColorstr='#70d2f5', GradientType=0);
  height: 40vw;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
}
body {
  margin: 0;
  padding: 0;
  background-color: green;
}

<div class="mast_head">
  <p style="font-family: 'Roboto', sans-serif;font-size:5vw;color:white;line-height:0;position: relative;
  top: 50%;">
    Text 1
  </p>
  <p style="font-family: 'Work Sans', sans-serif;font-size:2vw;color:rgba(255,255,255,.5);line-height:0;position: relative;
  top: 50%;">
    Text 2
  </p>
  <div style="top:-50;font-family: 'Biryani', sans-serif;color:white;">
    <div style="display:inline-block;">
      Bla1
    </div>
    <div style="display:inline-block;">
      Bla2
    </div>
    <div style="display:inline-block;">
      Bla3
    </div>
  </div>
</div>

Answer 1

编辑---

<p style="font-family: 'Roboto', sans-serif;font-size:5vw;color:white;line height:0;position: relative; top: 50%; display:inline-block;">

它是您的内联字体大小。使您的 P 标签内联 block 。或者改用 em 或 pt。