标题文本重叠在换行

Question

尝试制作我的第一个网格网站，一切顺利，但由于某种原因，标题文本挤在较小的浏览器中。

我尝试过使用不同元素的填充/边距。尝试添加行高，删除 flex 属性，没有任何效果。

我希望我的展示 h1 具有适当的行距。

body {
  background: var(--primary);
  margin: 30px 50px;
  line-height: 1.6rem;
}

img {
  max-width: 100%;
}

.wrapper {
  display: grid;
  grid-gap: 1.2rem;
}

.main-nav ul {
  display: grid;
  grid-gap: 1.3rem;
  grid-template-columns: repeat(4, 1fr);
  padding: 0;
  list-style: none;
}

.main-nav a {
  background: var(--dark);
  display: block;
  text-decoration: none;
  padding: 0.8rem;
  color: var(--primary);
  text-transform: uppercase;
  font-size: 1.1rem;
  box-shadow: var(--shadow);
  text-align: center;
}

.btn {
  color: var(--primary);
  background: var(--dark);
  padding: 0.6rem 1.3rem;
  text-decoration: none;
  border: 0;
  box-shadow: var(--shadow);
}

.main-nav a:hover {
  background: var(--primary);
  color: var(--dark);
}

.top-container {
  display: grid;
  grid-gap: 1.2rem;
  grid-template-areas: 'showcase showcase top-box-a' 'showcase showcase top-box-b';
}

.showcase {
  grid-area: showcase;
  min-height: 400px;
  background: url("https://source.unsplash.com/random");
  background-size: cover;
  background-position: center;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  color: black;
  box-shadow: var(--shadow);
}

.showcase h1 {
  font-size: 4rem;
  margin-bottom: 0.5rem;
}

.showcase p {
  font-size: 1.3rem;
  margin-top: 0;
}

.top-box {
  background: #545454;
  color: var(--primary);
  padding: 1.5rem;
  text-align: center;
  align-items: center;
  box-shadow: var(--shadow);
  justify-items: center;
}

.top-box .price {
  font-size: 1.4rem;
}

.top-box-a {
  grid-area: top-box-a;
}

.top-box-b {
  grid-area: top-box-b;
}

.boxes {
  display: grid;
  grid-gap: 1.3rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.box {
  background: var(--dark);
  color: var(--primary);
  text-align: center;
  padding: 1.5rem 2rem;
  box-shadow: var(--shadow);
}

<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />
<!-- Wrapper Begins-->
<div class="wrapper">
  <nav class="main-nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Gallery</a></li>
    </ul>
  </nav>
  <section class="top-container">
    <header class="showcase">
      <h1>Victors Tree Service</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua!
      </p>
      <a href="#" class="btn">Read More</a>
    </header>
    <div class="top-box top-box-a">
      <h2>Routine Services</h2>
      <p class="price">Starting at $199</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </p>
    </div>
    <div class="top-box top-box-b">
      <h2>Tree Removal</h2>
      <p class="price">From $299 - $799</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </p>
    </div>
  </section>
  <section class="boxes">
    <div class="box">
      <i class="fas fa-tree fa-4x"></i>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </div>
    <div class="box">
      <i class="fas fa-tools fa-4x"></i>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </div>
    <div class="box">
      <i class="fas fa-users fa-4x"></i>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </div>
    <div class="box">
      <i class="fas fa-clock fa-4x"></i>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </div>
  </section>
  <section class="info">
    <img src="https://source.unsplash.com/random">
    <div>
      <h2>Over 20 Years Experience</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </section>
  <section class="portfolio">
    <img src="https://source.unsplash.com/random/200x200">
    <img src="https://source.unsplash.com/random/200x201">
    <img src="https://source.unsplash.com/random/200x202">
    <img src="https://source.unsplash.com/random/200x203">
    <img src="https://source.unsplash.com/random/200x204">
    <img src="https://source.unsplash.com/random/200x205">
    <img src="https://source.unsplash.com/random/200x206">
    <img src="https://source.unsplash.com/random/200x207">
    <img src="https://source.unsplash.com/random/200x208">
  </section>
  <footer>Victor's Tree Service &copy 2019</footer>
</div>
<!--Wrapper Ends -->

Answer 1

这不是网格、弹性或填充/边距问题。这是line-height 问题。

特别是，问题是line-height: 1.6rem 设置在body 元素上。

line-height 属性设置行框的最小高度，其中存在内联元素，例如文本。

大多数浏览器的典型默认值是 1.2 (MDN) - 请注意无单位值；稍后会详细介绍。

此外，line-height 属性是可继承的 (MDN)，这意味着 HTML 结构下方的元素会采用您在上方设置的值。

由于您尚未在 body 元素下方的任何位置定义 line-height 值，因此该设置适用于整个文档。

那么问题来了：

您已将h1 设置为4rem。

但是1.6rem 的行高无法容纳该大小。

(4 * 16px) > (1.6 * 16px)

这是您在普通桌面模式下的布局：

注意标题已经超出了行框的边界。

由于行高较短，文本会在换行时重叠（就像在较小的屏幕上一样）：

解决方案，信不信由你，只是从line-height 值中删除长度单位。

所以不要使用line-height: 1.6rem，而是使用line-height: 1.6。

您甚至可以考虑使用 1.2 默认值（在这种情况下，您可以完全省略 line-height 规则）。

这个工作的原因如下：

当您使用line-height: 1.6rem 时，根据根元素的字体大小计算行框高度。在您的情况下，恰好是 16px（浏览器的默认值）。

line box height: 1.6 * 16px = 25.6px

   h1 font size: 4.0 * 16px = 64.0px

这就是h1 超出行框高度的原因。

但是对于line-height: 1.6，行框高度是根据字体本身的大小计算的。

line box height: 1.6 * (4 * 16px) = 102.4px

   h1 font size: 4.0 * 16px = 64.0px

这就是线框超过h1的高度的原因。

这也是在 line-height 属性中使用无单位值的原因。

请参阅规范以获取参考资料和更多详细信息：

• 10.8 Line height calculations: the line-height and vertical-align properties

Answer 2

使用media查询响应，它应该写在css的末尾，这样在媒体查询下编写的css属性不会被任何其他css属性覆盖。

@media screen and (max-width: 600px) {
  .main-nav a {
    text-align: center;
    float: none;
  }
}

使用display:block 代替display:grid，这样它会占用整个空间并使用float:left，这样所有元素都将位于容器的左侧。

body {
  background: var(--primary);
  margin: 30px 50px;
  line-height: 1.6rem;
}

img {
  max-width: 100%;
}

.wrapper {
  display: grid;
  grid-gap: 1.2rem;
}

.main-nav ul {
  display: block;
  padding: 0;
  list-style: none;
}

.main-nav a {
  background: var(--dark);
  display: block;
  text-decoration: none;
  margin: 0.8rem;
  /*use margin instead of padding so that it will be clickable only on the element*/
  color: var(--primary);
  text-transform: uppercase;
  font-size: 1.1rem;
  box-shadow: var(--shadow);
  text-align: center;
  float: left;
  border: 1px solid red;
  /*just to highlight the clickable el*/
}

.btn {
  color: var(--primary);
  background: var(--dark);
  padding: 0.6rem 1.3rem;
  text-decoration: none;
  border: 0;
  box-shadow: var(--shadow);
}

.main-nav a:hover {
  background: var(--primary);
  color: var(--dark);
}

.top-container {
  display: grid;
  grid-gap: 1.2rem;
  grid-template-areas: 'showcase showcase top-box-a' 'showcase showcase top-box-b';
}

.showcase {
  grid-area: showcase;
  min-height: 400px;
  background: url("https://source.unsplash.com/random");
  background-size: cover;
  background-position: center;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  color: black;
  box-shadow: var(--shadow);
}

.showcase h1 {
  font-size: 4rem;
  margin-bottom: 0.5rem;
}

.showcase p {
  font-size: 1.3rem;
  margin-top: 0;
}

.top-box {
  background: #545454;
  color: var(--primary);
  padding: 1.5rem;
  text-align: center;
  align-items: center;
  box-shadow: var(--shadow);
  justify-items: center;
}

.top-box .price {
  font-size: 1.4rem;
}

.top-box-a {
  grid-area: top-box-a;
}

.top-box-b {
  grid-area: top-box-b;
}

.boxes {
  display: grid;
  grid-gap: 1.3rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.box {
  background: var(--dark);
  color: var(--primary);
  text-align: center;
  padding: 1.5rem 2rem;
  box-shadow: var(--shadow);
}

@media screen and (max-width: 600px) {
  .main-nav a {
    text-align: center;
    float: none;
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Victors Tree Service</title>
  <link rel="stylesheet" type="text/css" href="C:\Users\geek\Desktop\Experimental\styles.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384- 
    UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>

<body>
  <!-- Wrapper Begins-->
  <div class="wrapper">
    <nav class="main-nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Gallery</a></li>
      </ul>
    </nav>
    <section class="top-container">
      <header class="showcase">
        <h1>Victors Tree Service</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua!
        </p>
        <a href="#" class="btn">Read More</a>
      </header>
      <div class="top-box top-box-a">
        <h2>Routine Services</h2>
        <p class="price">Starting at $199</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
      </div>
      <div class="top-box top-box-b">
        <h2>Tree Removal</h2>
        <p class="price">From $299 - $799</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
      </div>
    </section>
    <section class="boxes">
      <div class="box">
        <i class="fas fa-tree fa-4x"></i>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </div>
      <div class="box">
        <i class="fas fa-tools fa-4x"></i>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </div>
      <div class="box">
        <i class="fas fa-users fa-4x"></i>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </div>
      <div class="box">
        <i class="fas fa-clock fa-4x"></i>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </div>
    </section>
    <section class="info">
      <img src="https://source.unsplash.com/random">
      <div>
        <h2>Over 20 Years Experience</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </section>
    <section class="portfolio">
      <img src="https://source.unsplash.com/random/200x200">
      <img src="https://source.unsplash.com/random/200x201">
      <img src="https://source.unsplash.com/random/200x202">
      <img src="https://source.unsplash.com/random/200x203">
      <img src="https://source.unsplash.com/random/200x204">
      <img src="https://source.unsplash.com/random/200x205">
      <img src="https://source.unsplash.com/random/200x206">
      <img src="https://source.unsplash.com/random/200x207">
      <img src="https://source.unsplash.com/random/200x208">
    </section>
    <footer>Victor's Tree Service &copy 2019</footer>
  </div>
  <!--Wrapper Ends -->
</body>

</html>