css - 显示: block ；不做这份工作

Question

在一个css文件中，display: block应用于2个span，并没有把它们放在不同的行上，只是把它们放在一起彼此之上。你能帮我弄清楚吗？

问题出在选择器 .heading-primary--main 和 .heading-primary--sub 中。

* {
  margin: 0;
  /* we want no default margin or sizing applied by browsers */
  padding: 0;
  box-sizing: border-box;
  /*borders and paddings are not added to the total width and height of a box*/
}

body {
  font-family: 'Lato', sans-serif;
  /* we specify a general font that all the other children will inherit */
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7px;
  color: #777;
  padding: 30px;
  /* adds a nice white border to entire website */
}


/* class selector */

.header {
  height: 95vh;
  /* height is 95% of the viewport(screen) */
  background-image: linear-gradient( to right bottom, rgba(126, 213, 111, 0.8), #28b485), url('../img/hero.jpg');
  /* 2 bckgr imgs, one a gradient going from left top to right bottom, opacity 0.8 */
  background-size: cover;
  /* cover will scale the image to the size of the screen */
  background-position: top;
  /* as the screen size changes, image stays the same at top and gets cropped at                            the bottom */
  clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
  /* start with the left top corner of polygon and keep it as reference to trace the other corners of the polygon  using x, y axis */
  position: relative;
}

.logo-box {
  position: absolute;
  /* we use top, right, bottom, left to set the absolute position taking as reference the parent element (.header)*/
  top: 40px;
  left: 40px;
}

.logo {
  height: 35px;
  /* the width will scale accordinglly */
}

.text-box {
  position: absolute;
  /* shift 50% from top and left relative to the parent(header) */
  top: 40%;
  left: 50%;
  /* then transform-translate 50% same directions, now in relation to the box itself */
  transform: translate(-50%, -50%);
}

.heading-primary {
  color: #fff;
  text-transform: uppercase;
}

.heading-primary--main {
  display: block;
  font-size: 60px;
  font-weight: 600;
  letter-spacing: 35px;
}

.heading-primary--sub {
  display: block;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 14.7px;
}

<div class="header">
  <div class="logo-box">
    <img src="./img/logo-white.png" alt="logo white" class="logo" />
  </div>
  <div class="text-box">
    <h1 class="heading-primary">
      <span class="heading-primary--main">Outdoor</span>
      <span class="heading-primary--sub">is where life happens</span>
    </h1>
  </div>
</div>

Answer 1

请在 CSS 文件的 body 中删除 line-height: 1.7px; 属性，重叠问题将得到解决。如果你仍然想使用 line-height 属性，我建议你将 1.7px 更改为 1.7，或者你可以使用其他属性值(请引用下面提供的链接)。

line-height 的不同属性值:https://www.w3schools.com/cssref/playit.asp?filename=playcss_line-height&preval=3

line-height 属性的信息:https://www.w3schools.com/cssref/pr_dim_line-height.asp