Question

在css文件中，应用于两个display: block的{{1}}不会将它们放在单独的行上，而只是将它们放在一个顶部。您能帮我解决吗？

问题出在选择器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;
}

Answer 1

请从CSS文件的line-height: 1.7px;中删除body属性，即可解决重叠的问题。如果您仍然想使用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

显示：块；不胜任

1 个答案: