时间戳

首页 > 解决方案 > 我不知道为什么我的标题和描述之间有这么大的空白

html - 我不知道为什么我的标题和描述之间有这么大的空白

问题描述

我是 CSS 网格和编码的新手。我正在尝试为我的网站制作一个商店页面，但我无法弄清楚为什么我的标题和我在具有“标题容器”类的 div 中的描述之间存在如此大的差距。

在此先感谢您的帮助，

.container {
  display: grid;
  grid-template-rows: minmax(1000px, auto);
  grid-template-columns: 1fr 4fr;
  background-color: red;
}

.sidebar {
  background-color: blue;
}

.product-side {
  background-color: yellow;
}

.title-container {
  display: grid;
  grid-template-rows: minmax(200px, auto);
  width: 95%;
  margin: 0px auto;
  background-color: #000000;
}

.title-container h1,
p {
  color: #ffffff;
}
<div class="container">
  <div class="sidebar"></div>
  <div class="product-side">
    <div class="title-container">
      <h1>Title</h1>
      <p>Description</p>
    </div>
  </div>
</div>

标签： htmlcss

解决方案

grid-template-rows: minmax(200px, auto);将您的标题容器设置为 200px 高度。

删除或调整此属性。

下面的例子：

.container {
  display: grid;
  grid-template-rows: minmax(1000px, auto);
  grid-template-columns: 1fr 4fr;
  background-color: red;
}

.sidebar {
  background-color: blue;
}

.product-side {
  background-color: yellow;
}

.title-container {
  display: grid;
  grid-template-rows: minmax(60px, auto);
  width: 95%;
  margin: 0px auto;
  background-color: #000000;
}

.title-container h1,
p {
  color: #ffffff;
}
<div class="container">
  <div class="sidebar"></div>
  <div class="product-side">
    <div class="title-container">
      <h1>Title</h1>
      <p>Description</p>
    </div>
  </div>
</div>

推荐阅读