我不明白这个 css 文件中发生了什么答案

【问题标题】：i dont understand what is happening here in this css file我不明白这个 css 文件中发生了什么
【发布时间】：2021-10-24 14:52:04
【问题描述】：

我刚刚在页面中创建了一个导航栏和一个小主要部分，但这里的问题是导航栏和主要部分之间有一个空间，它们之间没有任何边距或填充。

/*this is a universal selector to clear the padding and margin*/
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


body{
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}

/*[starting the style of the nav bar]*/

/*this is the style fot the whole nav bar*/
nav{
    background-color: black;
    box-shadow: 5px 5px 20px;
    position: fixed;
    top: 0;
    width: 100%;
    height: 8%;
    outline: auto;
}

/*this is the containing block for all the list items in the nav*/
nav ul{
    margin: auto;
    text-align: center;
    outline: solid rgb(247, 5, 5) 4px;
}

/*this is the style for the each one of the list items*/
nav li{
    display: inline;
    padding: 20px;
    margin: 30px;
    outline: solid green 4px;
}

/*the style for the text in the list items of the nav*/
nav a{
    display: inline-block;
    padding: 20px;
    font-weight: 900;
    color: white;
    text-decoration: none;
    outline: solid yellow 7px;
}

/*[starting the style of the main section]*/
main{
    text-align: center;
    background-image: url(code1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    outline: solid black 7px;
    width: 100%;
    /*height: 600px;*/
    color: white;
    /*border: solid blue 1px;*/
}

main > h1 {
    font-size: 60px;
    margin: 160px;
}

main > h2{
    font-size: 50px;
}

<!DOCTYPE html>
<html>
<head>
    <title>
        ammar eneen
    </title>
    <link rel="stylesheet" href="style.css">
</head>


<body>
<!--this is the horizontal nav bar at the top of the page-->
<nav>
    <ul>
        <li><a href="">HOME</a></li>
        <li><a href="">HOW IT WORKS</a></li>
        <li><a href="">ORDER</a></li>
        <li><a href="#" target="_blank">GALLERY</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
</nav>

<!--this is the main section at the home page right under the nav bar-->
<main>
    <h1>
        welcome to <br><span style="text-shadow: 3px 3px rgb(221, 8, 8)">EYD</span>
    </h1>
    <h2>best web-developing service</h2>
    <p>order your own service now <span>ORDER</span></p>  
    <p>if this is your first time here check <span>HOW IT WORKS</span></p>
</main>


<section>
    
</section>


</body>

</html>

【问题讨论】：

注意：当我向主要部分添加边框时，它会修复它！！！！！！！！！边框与元素之间的空间有什么关系？！！！我为每个元素添加了轮廓，以显示它们之间没有边距
看看：developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/… 你应该找到关于边框（或填充）发生了什么的解释

标签： html css margin

【解决方案1】：

将导航高度设置为自动，您可以使用填充来添加间距......

nav{
    background-color: black;
    box-shadow: 5px 5px 20px;
    position: fixed;
    top: 0;
    width: 100%;
    padding: 10px;
    height: auto;
    outline: auto;
}

https://jsfiddle.net/c8woj40v/

【讨论】：

【解决方案2】：

你说你没有任何保证金。但是你有

main > h1 {
    font-size: 60px;
    margin: 160px;
}

160 像素的边距是您在导航和主屏幕之间看到的“空间”。将其更改为 margin: 0 160px 160px 160px 以将其从“顶部”中删除。

如果您想在 main 的顶部添加“空格”，请在 main 上使用 padding-top:160px

出于示例目的，向 main 添加了红色的 bck 颜色。

/*this is a universal selector to clear the padding and margin*/
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


body{
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}

/*[starting the style of the nav bar]*/

/*this is the style fot the whole nav bar*/
nav{
    background-color: black;
    box-shadow: 5px 5px 20px;
    position: fixed;
    top: 0;
    width: 100%;
    height: 8%;
    outline: auto;
}

/*this is the containing block for all the list items in the nav*/
nav ul{
    margin: auto;
    text-align: center;
    outline: solid rgb(247, 5, 5) 4px;
}

/*this is the style for the each one of the list items*/
nav li{
    display: inline;
    padding: 20px;
    margin: 30px;
    outline: solid green 4px;
}

/*the style for the text in the list items of the nav*/
nav a{
    display: inline-block;
    padding: 20px;
    font-weight: 900;
    color: white;
    text-decoration: none;
    outline: solid yellow 7px;
}

/*[starting the style of the main section]*/
main{
    text-align: center;
    background-color:red; /* added for example purposes */
    background-image: url(code1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    outline: solid black 7px;
    
    width: 100%;
    /*height: 600px;*/
    color: white;
    /*border: solid blue 1px;*/
}

main {
  padding-top:160px; /* add this*/
}
main > h1 {
    font-size: 60px;
    margin: 0 160px 160px 160px; /* change this*/
}
main > h2{
    font-size: 50px;
}

<html>
<head>
    <title>
        ammar eneen
    </title>
    <link rel="stylesheet" href="style.css">
</head>


<body>
<!--this is the horizontal nav bar at the top of the page-->
<nav>
    <ul>
        <li><a href="">HOME</a></li>
        <li><a href="">HOW IT WORKS</a></li>
        <li><a href="">ORDER</a></li>
        <li><a href="#" target="_blank">GALLERY</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
</nav>

<!--this is the main section at the home page right under the nav bar-->
<main>
    <h1>
        welcome to <br><span style="text-shadow: 3px 3px rgb(221, 8, 8)">EYD</span>
    </h1>
    <h2>best web-developing service</h2>
    <p>order your own service now <span>ORDER</span></p>  
    <p>if this is your first time here check <span>HOW IT WORKS</span></p>
</main>


<section>
    
</section>


</body>

</html>

【讨论】：