CSS-Grid Cell中的小空间

Question

我正在尝试使用CSS Grid制作简单的博客布局。代码是在div的底部添加一个6px空间，在帖子中保留前导图像。除非我明确调整行的大小，否则我无法消除这种差距，这会破坏网站的响应能力。 div中的图像文件大小为1140x760px。

CSS：

npm install @auth0/angular-jwt@1.0.0-beta.10

HTML

.post {
  display: grid;
    grid-gap: 5px;
    grid-template-areas:
      "hero hero"
      "article sidebar";
    grid-template-columns: 4fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.post > div > img {
  width: 100%;
}

#hero {
  grid-area: hero;
}

#article {
  grid-area: article;
}

#sidebar {
  grid-area: sidebar;
}

Answer 1

尝试在{strong> img 标记上添加display: block，这是一个带有img标记的经典案例，可以创建display: inline的空格。希望这会有所帮助。

Answer 2

额外空间来自.post中的 grid-gap: 5px; ，表示.post的每个孩子之间应该有多少空间。只需删除它，您的元素就会相互冲洗。

当然，这将从布局中删除所有的间隙。如果您只想要水平间隙，可以使用 grid-column-gap ，如果您只想要垂直间隙，则可以使用 grid-row-gap 。如果您只想在特定位置留一个间隙，可以改用margin。