如何删除网站和导航栏周围的 space [CSS][margin collapsing]

Question

我目前正在为所谓的保证金崩溃而苦苦挣扎。我确实通过使用 position: relative 和 top:-20px 得到了一个解决方法（你可以在横幅下的代码中看到 main-nav 我把它注释掉了）我只是想知道是否有更好的方法来解决这个问题？

此外，我的变通解决方案在我的页眉和第一段之间创建了一个空隙，而且整个网站周围显然仍然有一个可见的填充。我该如何解决这个问题？

您可以在 CodePen

查看实时版本

是否还有一种方法可以像我的旧 WordPress 网站那样使导航栏变粘并展开动画：Wordpress website 或者您需要 JavaScript 吗？

html代码：

<html>
    <link rel="stylesheet" href="Style.css">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" contect ="ie=edge">
<title>Severe Gaming</title>
</head>
<body>
 <div class="wrapper">
 <!-- Navigation --> 
    <nav class="main-nav">
        <ul >
            <li><a href="#">Home</a></li>
            <li><a href="#">Teams</a></li>
            <li><a href="#">Achievements</a></li>
            <li><a href="#">Media</a></li>
            <li><a href="#">Sponsors</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <header class="banner">
    </header>
    <!-- Top Container -->
    <section class="container">
       <header class="box paragraph1">
           <h1>Welcome to Severe Gaming</h1>
           <p>Severe Gaming is a Multi-Gaming Organisation founded in 2010. Over the years it has served as a platform for players to compete in many different games at a highly competitive level as well as serving as a home for players to improve their skills and build strong relationships with one another. Severe Gaming sees the potential in the South African eSports scene and aims to develop and grow with it as the future unfolds.</p>
       </header>
       <div class ="picture1">
       </div>
       <div class ="picture2">
       </div>
         <header class="box paragraph2">
           <h1>Welcome to Severe Gaming</h1>
           <p>Severe Gaming is a Multi-Gaming Organisation founded in 2010. Over the years it has served as a platform for players to compete in many different games at a highly competitive level as well as serving as a home for players to improve their skills and build strong relationships with one another. Severe Gaming sees the potential in the South African eSports scene and aims to develop and grow with it as the future unfolds.</p>
       </header>
    </section>
   <div class="footer">
   </div>
 </div> 
 <!-- Wrapper Ends -->
</body>
</html>

CSS代码：

    /* CSS Variables */
:root {
    --primary: #FFFFFF;
}

html {
    box-sizing: border-box;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    color: var(--primary);
}

body {
    background: #0b0e17;
  /*  margin: 30px 50px; */
    line-height: 1.4;
}

img {
    max-width: 100%;
}

.wrapper {
    display: grid;
    grid-gap: 0px;
}
.banner {
    /*position:relative;
    top:-40px;*/
    background: url(https://image.ibb.co/earz6x/header.png);
    height:392px;
}

/* Navigation */
.main-nav ul{
    /* position:relative;
    top:-20px; */
    display: grid;
    grid-column-gap:20px;
    padding:0px;
    list-style: none;
    grid-template-columns: repeat(7, 1fr);
    background: url("https://image.ibb.co/jd1ozH/Nav_bar.png");
    height:90px; 
}

.main-nav a{
    display:block;
    text-decoration: none;
    padding: 2rem;
    text-transform: uppercase;
    text-align: center;
    color: var(--primary);
    font-weight: 600;
}

.container {
    display: grid;
    grid-template-areas: 
        'paragraph1 picture1'
        'picture2 paragraph2' ;
}

.paragraph1 {
    min-height: 200px;
    grid-area: paragraph1;
    justify-content: center;
    align-items: start;

}
.box {
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
}

.box h1{
  border-bottom: 3px solid; 
  padding-bottom: 0px;
  line-height: 1.75em;
}

.picture1 {
    grid-area: picture1;
    background: url(https://image.ibb.co/ddNWKH/mockup.png);
    background-size:cover;
    background-position: center;   
}

.picture2 {
    grid-area: picture2;
    background: url(https://image.ibb.co/ddNWKH/mockup.png);
    background-size:cover;
    background-position: center;  
}

.paragraph2 {
    grid-area: paragraph2;
    justify-content: center;
    align-items: start;    
}

.footer{
    background: url(https://preview.ibb.co/f5fqDc/footer.png);
    background-size: cover;
    background-position: center;
    height: 40px;
}

Answer 1

HTML 为页面添加默认页边距。要删除它，请将其放入您的 css 文件中。

* {
  margin: 0;
}

Answer 2

您需要在 ul

中添加 display:flex 和 float:right

/* CSS Variables */
:root {
    --primary: #FFFFFF;
}

html {
    box-sizing: border-box;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    color: var(--primary);
}

body {
    background: #0b0e17;
  /*  margin: 30px 50px; */
    line-height: 1.4;
}

img {
    max-width: 100%;
}

.wrapper {
    display: grid;
    grid-gap: 0px;
}
.banner {
    /*position:relative;
    top:-40px;*/
    background: url(https://image.ibb.co/earz6x/header.png);
    height:392px;
}

/* Navigation */
.main-nav ul{
    /* position:relative;
    top:-20px; */
    display: flex;
  float:right;
    grid-column-gap:20px;
    padding:0px;
    list-style: none;
    grid-template-columns: repeat(7, 1fr);
    background: url("https://image.ibb.co/jd1ozH/Nav_bar.png");
    height:90px; 
}

.main-nav a{
    display:block;
    text-decoration: none;
    padding: 2rem;
    text-transform: uppercase;
    text-align: center;
    color: var(--primary);
    font-weight: 600;
}

.container {
    display: grid;
    grid-template-areas: 
        'paragraph1 picture1'
        'picture2 paragraph2' ;
}

.paragraph1 {
    min-height: 200px;
    grid-area: paragraph1;
    justify-content: center;
    align-items: start;
    
}
.box {
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
}

.box h1{
  border-bottom: 3px solid; 
  padding-bottom: 0px;
  line-height: 1.75em;
}

.picture1 {
    grid-area: picture1;
    background: url(https://image.ibb.co/ddNWKH/mockup.png);
    background-size:cover;
    background-position: center;   
}

.picture2 {
    grid-area: picture2;
    background: url(https://image.ibb.co/ddNWKH/mockup.png);
    background-size:cover;
    background-position: center;  
}

.paragraph2 {
    grid-area: paragraph2;
    justify-content: center;
    align-items: start;    
}

.footer{
    background: url(https://preview.ibb.co/f5fqDc/footer.png);
    background-size: cover;
    background-position: center;
    height: 40px;
}

<html>
    <link rel="stylesheet" href="Style.css">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" contect ="ie=edge">
<title>Severe Gaming</title>
</head>
<body>
 <div class="wrapper">
 <!-- Navigation --> 
    <nav class="main-nav">
        <ul >
            <li><a href="#">Home</a></li>
            <li><a href="#">Teams</a></li>
            <li><a href="#">Achievements</a></li>
            <li><a href="#">Media</a></li>
            <li><a href="#">Sponsors</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <header class="banner">
    </header>
    <!-- Top Container -->
    <section class="container">
       <header class="box paragraph1">
           <h1>Welcome to Severe Gaming</h1>
           <p>Severe Gaming is a Multi-Gaming Organisation founded in 2010. Over the years it has served as a platform for players to compete in many different games at a highly competitive level as well as serving as a home for players to improve their skills and build strong relationships with one another. Severe Gaming sees the potential in the South African eSports scene and aims to develop and grow with it as the future unfolds.</p>
       </header>
       <div class ="picture1">
       </div>
       <div class ="picture2">
       </div>
         <header class="box paragraph2">
           <h1>Welcome to Severe Gaming</h1>
           <p>Severe Gaming is a Multi-Gaming Organisation founded in 2010. Over the years it has served as a platform for players to compete in many different games at a highly competitive level as well as serving as a home for players to improve their skills and build strong relationships with one another. Severe Gaming sees the potential in the South African eSports scene and aims to develop and grow with it as the future unfolds.</p>
       </header>
    </section>
   <div class="footer">
   </div>
 </div> 
 <!-- Wrapper Ends -->
</body>
</html>

Answer 3

要在滚动时阻止导航移动，您需要添加位置：固定，宽度：100%。确保在您的横幅之后添加边距顶部，这样它就不会被您的导航覆盖。

.banner {
    background: url(https://image.ibb.co/earz6x/header.png);
    height:392px;
    margin-top: 90px;
}

/* Navigation */
.main-nav ul{
    display: grid;
    grid-column-gap:20px;
    padding:0px;
    list-style: none;
    grid-template-columns: repeat(7, 1fr);
    background: url("https://image.ibb.co/jd1ozH/Nav_bar.png");
    height:90px; 
    position: fixed;
    width: 100%;
}

我不确定动画。目前，您的页面上似乎没有。但是，是的，为此需要 js。这里有一个网站可以帮助您：https://vincentgarreau.com/particles.js/

在您的网站上，横幅位于页面中央，背景为黑色。如果你想要，你的 css 应该是：

.banner {
    /*position:relative;
    top:-40px;*/
    background-image: url(https://image.ibb.co/earz6x/header.png);
    background-color: #0a0a0a;
    background-repeat: no-repeat;
    background-position: center; 
    height:392px;
    margin-top: 90px;
}

如何删除网站和导航栏周围的 space [CSS][margin collapsing]

how to removed space around website and Navigation bar [CSS][margin collapsing]

html

css

margin