Question

我在该网站上阅读了一个小问题，但令人烦恼，这是我的网页的实际内容开始之前的很小差距，但是没有一种解决方案对我有用。我已将所有元素默认设置为0填充和0边距，但仍然可能会导致溢出。

这是我的css文件：

*{
    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%;

}

html文件：

<!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>

用Firefox检查元素，白色在实际主体之前。 我如何摆脱这种差距？

Answer 1

尝试删除标题.header-landing{margin: 0 10px;}中的顶部空白

Answer 2

您的班级标题着陆距顶部有15的空白，这导致文本向下移动。

编辑：针对将来出现的此类问题，进入检查模式，选择最左侧的选项，即“在页面上选择元素”，然后可以将鼠标悬停在元素上并查看其边距和填充。知道要查看的内容后，单击它，即可看到它的CSS属性

之前的空白内容

2 个答案: