Why h1 inside of a div is not stretching?

Question

I have this layout... Basically, there is a space between the container and the top. I already found the solution, but I need to understand why this is happening.

        body {
            background-color: rgb(71, 59, 182);
            margin: 0;
            padding: 0;
        }


        .container{
            display: block;
            background-color: white;
            text-align: left;
            margin: 0;
            width: 75%; 
            height: 100vh;
        }

    <body>
        <div class="container"> 
            <div>
                <h1>Blablabla</h1>
            </div>
            <div class="forms">
                <p class="forms-item">Name: <input type="text"> </p>
            </div>
        </div>

    </body>

The solution: I've inspected the element and I've seen that the margin of the h1 was causing it. So adding:

div>h1{
    margin:0;
}

Would fix the problem. But I want to understand why this is happening. Why the container is not streching with the h1 margin.... Since it is inside of the container, it was supposed to stretch it.

Well html elements have built in css, like h1 h2 h3 it all coms with built in css and the way to remove it is to override it as you did — Stefan Avramovic, Oct 22 '21 at 21:53

Why h1 inside of a div is not stretching?

0 Answers0