Help with removing space in <h1>

[MrRobotBDR]

What is responsible for all the whitespace around the text in this <h1>?

It's so big it's almost acting as a margin-top.

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

View: https://imgur.com/bTUg9uR

<section class="contact-hero">
    <h1>Contact us...</h1>
    <p>Write us a brief, ask us a question or tell us what you’re looking for in your own words.</p>
</section>

.contact-hero {
    width: 100%;
    text-align: center;

    h1 {
        font-family: $ff-h1;
        font-size: 128px;
        margin-bottom: 30px;
    }

    p {
        font-family: $ff-p;
        color: $off-black-grey-p;
        margin-bottom: 70px;
    }
}

 

[Johna]

Heading elements do, by default, have top and bottom margins:


You can set margin-top: 0; on the h1 element to remove that top margin.

There will still be a little bit of spacing at the top and bottom, which if you don't want, can be removed by reducing the line height.