标题文字在包装上重叠

Question

试图建立我的第一个网格网站，一切进行得很好，但是由于某种原因，Header文本在较小的浏览器中拥挤。

我尝试过使用不同元素的填充/边距。尝试增加行高，删除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结构下的元素采用您设置得更高的值。

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

所以这是问题所在：

您已将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:grid代替display:block，以便占据整个空间，并使用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>