html - CSS 网格 - 基于行的放置

Question

我已经玩了一个星期的 css 网格，我正在尝试制作与 Line-based placement 类似的布局。作者:雷切尔·安德鲁。

HTML:

<div class="wrapper">
  <h1 class="box a">Heading</h1>
  <div class="box b">Image</div>
  <p class="box c">Paragraph</p>
</div>

CSS:

body {
  margin: 40px;
}

.wrapper {
    display: grid;
    grid-gap: 10px;
        grid-template-columns: 100px 100px 100px;
        background-color: #fff;
        color: #444;
    }

    .box {
        background-color: #444;
        color: #fff;
        border-radius: 5px;
        padding: 20px;
        font-size: 150%;
    }

    .a {
        grid-column: 1 / 3;
        grid-row: 1;
    }
    .b {
        grid-column: 3 ;
        grid-row: 1 / 3;
    }
    .c {
        grid-column: span 2 ;
        grid-row: 2 ;
    }

当我用 h1 和 p 替换 div 标签时，布局完全改变了。

Expected layout with div tags

但是当我使用 h1 和 p 标签时，它实际上看起来像这样

Actual layout with h1 and p tags

有人可以解释这种行为吗？

Answer 1

重置 h1 和 p 元素的边距就可以了。