个人中心
gpt4 book ai didi

html - 如何删除网站和导航栏周围的空间[CSS] [margin collapsing]

转载 作者：行者123 更新时间：2023-11-28 00:46:46 24 4
gpt4 key购买 nike

我目前正在为所谓的 margin 崩溃而苦苦挣扎。我确实通过使用 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;
}

最佳答案

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

* {
  margin: 0;
}

关于html - 如何删除网站和导航栏周围的空间[CSS] [margin collapsing]，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49995908/

24 4 0
文章推荐： javascript - 使用 bodyParser 和 Router() 无法检索表单输入
文章推荐： html - 在嵌套表上使用 rvest 时遇到问题
文章推荐： html - Bootstrap 4 tabs multi-level tablist with collapse 不能正常工作；多个选项卡同时处于事件状态
文章推荐： javascript - JQuery 序列化数据输入为空