如何缩小CSS Grid布局中h4、h1、p元素间的间距

开发者阿泽

2026-8-14

解决h4、h1、p元素间距过大的问题

问题核心是浏览器默认的元素外边距（margin）以及你给元素设置的内边距（padding）在起作用，而非Grid的row-gap。可以通过以下步骤解决：

清除默认外边距：h1、h4、p这类元素浏览器会自带上下margin，直接重置为0即可消除大部分额外间距。
调整内边距：你给h1设置的上下padding会拉大元素间距离，按需减小或移除。
按需微调Grid行间距：如果清除默认样式后仍有间隙，再调整row-gap。

修改后的桌面端媒体查询CSS代码如下：

/* MEDIA QUERIES ================ ( For desktops ) ================ */

@media screen and (min-width: 1024px) {
  .content {
    display: grid;
    grid-template-areas: 'one four' 'two four' 'three .';
    margin-top: 0;
    /* 可选：若需进一步缩小网格行间距，取消注释此行 */
    /* row-gap: 0.5rem; */
  }
  .image {
    display: inline-block;
    grid-area: four;
  }
  .image img {
    width: 25rem;
    height: 28rem;
  }
  h1 {
    margin: 0;
    padding: 0.5rem 10rem 0.5rem 0rem;
    font-size: 3.5rem;
    text-align: start;
    grid-area: two;
  }
  p {
    margin: 0;
    text-align: start;
    grid-area: three;
    font-size: 1.1rem;
    padding-right: 20rem;
  }
  h4 {
    margin: 0;
    margin-top: 4rem;
    text-align: start;
    height: 3.2rem;
    width: 34rem;
    padding: 0.3rem 1rem;
    grid-area: one;
  }
}