CSS grid - Line-based placement

Question

I have been playing with css grid for week now and I am trying make a similar layout as the Line-based placement by Rachel Andrew.

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 ;
    }

The layout changes completely when I replace the div tags with h1 and p.

Expected layout with div tags

But when I use h1 and p tags it actually looks like this

Actual layout with h1 and p tags

Can someone explain this behaviour?

Answer 1

Reseting the margin of the h1 and p elements did the trick.