Div has margin-top, but I don't added it

Question

enter image description here

I have 2 divs and in seconds style I didnt set margin-top. Green is .header and aqua is .products

.header {
    width: 100%;
    height: 100vh;
    background: #32a852;
}
.products {
    margin-bottom: 80px;
    min-height: 100vh;
    background: #bfd8ff;
}
<header>
    <div class="header">
        <div class="navbar">
            <div class="logo">
                <img src="img/logo.png" class="companylogo no-select" onclick="reload();">
                <img src="img/menu.png" class="menuicon no-select" onclick="menutoggle();">
            </div>
            <nav>
                <ul id="menuitems">
                    <li><a href="" class="no-select">Главная</a></li>
                    <li><a href="" class="no-select">Продукты</a></li>
                    <li><a href="" class="no-select">Услуги</a></li>
                    <li><a href="" class="no-select last">Контакты</a></li>
                </ul>
            </nav>
        </div>
        <div class="header-content">
            <b><p class="companyname">ВВВВВВВВВВВВВВВ</p></b>
            <p class="welcometext">Здесь вы можете купить саженцы деревьев, цветы и многое другое,</br> а так же у нас есть садовые услуги</p>
            <p class="welcometext">Hайдете все для дома и дачи!</p>
            <span class="typed-text"></span><span class="cursor">&nbsp;</span>
            <div class="animationdiv"><img src="img/animation.gif" class="animation no-select"></div>
            <div class="open-close">
                <p class="open-close-title">Время когда мы работаем</p>
                <img src="img/time.png" class="time no-select"><br>
                <p class="open-close-text" id="open-close-text"></p>
                <p>С <b>9:00</b> До <b>6:00</b></p>
            </div>
        </div>
    </div>
</header>
<div class="products">
    <h1>PRODUCTS</h1>
</div>

Interesting what details stackoverflow needs? Can you save my heavydirtysoul?

Hello! welcome to stackoverflow. please take the [tour] and read [ask]. And read how to provide a [mre]. Please post the HTML code — ppwater, Dec 27 '20 at 05:14
Mind the default body and document padding/margins... plus the property `box-sizing` with the value `border-box` yields lesser headaches when used as default.. — zergski, Dec 27 '20 at 05:29

score 0 · Answer 1 · answered Dec 27 '20 at 05:30

Reason

It's coming from h1.

How to fix

You can add margin-top: 0.

html, body {
  margin: 0;
  padding: 0;
}
.header {
    width: 100%;
    height: 100vh;
    background: #32a852;
}
.products {
    margin-bottom: 80px;
    min-height: 100vh;
    background: #bfd8ff;
}
h1 {
  margin-top: 0
}

<header>
    <div class="header">
        <div class="navbar">
            <div class="logo">
                <img src="img/logo.png" class="companylogo no-select" onclick="reload();">
                <img src="img/menu.png" class="menuicon no-select" onclick="menutoggle();">
            </div>
            <nav>
                <ul id="menuitems">
                    <li><a href="" class="no-select">Главная</a></li>
                    <li><a href="" class="no-select">Продукты</a></li>
                    <li><a href="" class="no-select">Услуги</a></li>
                    <li><a href="" class="no-select last">Контакты</a></li>
                </ul>
            </nav>
        </div>
        <div class="header-content">
            <b><p class="companyname">ВВВВВВВВВВВВВВВ</p></b>
            <p class="welcometext">Здесь вы можете купить саженцы деревьев, цветы и многое другое,</br> а так же у нас есть садовые услуги</p>
            <p class="welcometext">Hайдете все для дома и дачи!</p>
            <span class="typed-text"></span><span class="cursor">&nbsp;</span>
            <div class="animationdiv"><img src="img/animation.gif" class="animation no-select"></div>
            <div class="open-close">
                <p class="open-close-title">Время когда мы работаем</p>
                <img src="img/time.png" class="time no-select"><br>
                <p class="open-close-text" id="open-close-text"></p>
                <p>С <b>9:00</b> До <b>6:00</b></p>
            </div>
        </div>
    </div>
</header>
<div class="products">
    <h1>PRODUCTS</h1>
</div>

score 0 · Answer 2 · answered Dec 27 '20 at 05:30

0

The h1 in:

<div class="products">
    <h1>PRODUCTS</h1>
</div>

Has a top margin by default. Remove the top margin with:

h1 {
    margin-top: 0;
}

Should fix it.

answered Dec 27 '20 at 05:30

Max

109
2

score 0 · Answer 3 · answered Dec 27 '20 at 05:31

You have to remove the margin from the <h1> which is causing the margin

.header {
    width: 100%;
    height: 100vh;
    background: #32a852;
}
.products {
    margin-bottom: 80px;
    min-height: 100vh;
    background: #bfd8ff;
}

.products h1:first-child {
    margin-top: 0;
}

<header>
    <div class="header">
        <div class="navbar">
            <div class="logo">
                <img src="img/logo.png" class="companylogo no-select" onclick="reload();">
                <img src="img/menu.png" class="menuicon no-select" onclick="menutoggle();">
            </div>
            <nav>
                <ul id="menuitems">
                    <li><a href="" class="no-select">Главная</a></li>
                    <li><a href="" class="no-select">Продукты</a></li>
                    <li><a href="" class="no-select">Услуги</a></li>
                    <li><a href="" class="no-select last">Контакты</a></li>
                </ul>
            </nav>
        </div>
        <div class="header-content">
            <b><p class="companyname">ВВВВВВВВВВВВВВВ</p></b>
            <p class="welcometext">Здесь вы можете купить саженцы деревьев, цветы и многое другое,</br> а так же у нас есть садовые услуги</p>
            <p class="welcometext">Hайдете все для дома и дачи!</p>
            <span class="typed-text"></span><span class="cursor">&nbsp;</span>
            <div class="animationdiv"><img src="img/animation.gif" class="animation no-select"></div>
            <div class="open-close">
                <p class="open-close-title">Время когда мы работаем</p>
                <img src="img/time.png" class="time no-select"><br>
                <p class="open-close-text" id="open-close-text"></p>
                <p>С <b>9:00</b> До <b>6:00</b></p>
            </div>
        </div>
    </div>
</header>
<div class="products">
    <h1>PRODUCTS</h1>
</div>

Div has margin-top, but I don't added it

3 Answers3

Reason

How to fix