CSS网格-基于行的放置

Question

我已经使用CSS网格一周了，我正在尝试制作与Rachel Andrew的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元素的边距可以解决问题。