White Gap before the content

Question

I have read in this site about a minor but annoying problem, a small gap before the actual content of my web page begins, but none of the solutions have worked for me. I have set all elements with 0 padding and 0 margin by default, but still something might be causing overflow.

This is my css file:

*{
    box-sizing: border-box;
    margin:0px;
    padding:0px;
    font-family: sans-serif;
}

//some global variables here

body{
    background-color: var(--brand-white);
    color:var(--brand-light-gray);
}

.header-landing{
    align-items: center;
    justify-content: space-between;
    padding:0 10px 0 10px;
    margin:15px 10px 0 10px;

}

.header-nav{
    display: flex;
    justify-content: center;
}

.header-nav > li{
    display:inline;
    list-style: none;
    padding:0 10px 0 10px; 
}

.header-logo{
    display: inherit;
    justify-content: center;
}


.main-content{
    background-color: var(--brand-light-gray-2);
    width: 100%;

}

the html file:

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>nomihub</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="style.css">

  <link rel="icon" type="image/x-icon" href="favicon.ico">

</head>
<body>
    <section class="main-content">

    <div class="header-landing flex-grid">
        <picture class="header-logo col-2">
            <h2>LOGO</h2>
        </picture>


        <div class="col-8">
            <ul class="header-nav">
                <li><a href="">Características</a></li>
                <li><a href="">Precio</a></li>
                <li><a href="">Partners</a></li>
                <li><a href="">Recursos</a></li>
            </ul>
        </div>

        <div class="col-2">
            <button class="btn-default">
                INGRESAR
            </button>
        </div>

    </div>

        <div class="main-content-welcome">
            <div class="welcome-header">
                <ul class="welcome-header__list">
                <li><h2>Bienvenidos</h2></li>
                <li><h1>El software de nomina más simple de todos</h1></li>
                <li><p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p></li>

                 <li><button class="btn-default">
                        ACTIVAR DEMO
                     </button></li>
                </ul>    
            </div>
             <div class="main-content-features">

            <div class="welcome-container  ">
                <div class="circle"></div>
              <h3>ENCRIPTACIÓN</h3>  
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
              </div>
            <div class="welcome-container ">
                <div class="circle"></div>
               <h3>VIGILANCIA</h3>
                 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
              </div>
            <div class="welcome-container ">
                <div class="circle"></div>
               <h3>RESPALDO</h3>
                 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
              </div>
            <div class="welcome-container  ">
                <div class="circle"></div>
               <h3>LIMITES ESTRICTOS</h3>
                 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
              </div>

        </div>

        </div>

    </section>


</body>
</html>

inspecting the elements with firefox, the white is before the actual body. How I get rid of this gap?

@Turnip oh dang it! that's it, i confused the padding with margin values, ty! — Progs, Jul 12 '18 at 15:22

score 2 · Answer 1 · answered Jul 12 '18 at 15:22

2

Try removing the top margin in the header .header-landing{margin: 0 10px;}

answered Jul 12 '18 at 15:22

Nicolas M. Pardo

753
1
6
16

Gortax · Accepted Answer · 2018-07-12T19:57:22.047

1

Your class header-landing has a margin of 15 from the top, that causes the text to be moved down.

Edit: for those kinds of problems in the future, go into inspect mode, chose the most left option called "chose an element on the page", then you can hover over elements and see their margins and paddings. Once you know what you want to look at, click on it and you can see it's CSS properties

edited Jul 12 '18 at 19:57

answered Jul 12 '18 at 15:22

Gortax

26
3

White Gap before the content

2 Answers2