Html 如何在导航栏下方添加边距_Html_Css

Html 如何在导航栏下方添加边距

html css

Html 如何在导航栏下方添加边距,html,css,Html,Css,我想让它看起来像是在导航栏下的空白处，以便我添加其他内容。从本质上讲，如何为灰色背景延伸到的范围添加一个截止点？现在整个窗口都满了。我想让它在所有导航栏下面几个像素。我附上了一张照片供参考 </head> <body> <header> <img class="logo" src="img/logo.svg" alt="logo">

我想让它看起来像是在导航栏下的空白处，以便我添加其他内容。从本质上讲，如何为灰色背景延伸到的范围添加一个截止点？现在整个窗口都满了。我想让它在所有导航栏下面几个像素。我附上了一张照片供参考

    </head>
        <body>
                <header>
                    <img class="logo" src="img/logo.svg" alt="logo">
                    <nav>
                            <ul class="nav__links">
                                    <li><a href="#">Projects</a></li>
                                    <li><a href="#">About</a></li>
                                    <li><a href="#">Contact</a></li>
                            </ul>
                    </nav>
                </header>
        <body>
</html>

添加

显示：块和<代码>高度：50px

到

。导航链接li a{…}

。这将允许您为元素添加一个高度，因为<代码> a <代码>是一个内联元素，它不会考虑<代码>高度> /COD>属性，所以我们必须使“<代码>块或<代码>内联块 >以便它可以接受高度属性。

*{
框大小：边框框；
保证金：0；
填充：0；
}
锂，
a{
字体系列：“蒙特塞拉特”，无衬线；
字号：500；
字体大小：16px；
颜色：#edf0f1；
文字装饰：无；
}
标题{
显示器：flex；
证明内容：柔性端；
对齐项目：居中；
填充：30px 10%；
背景色：#24252A；
}
.标志{
光标：指针；
右边距：自动；
位置：绝对位置；
宽度：100px；
高度：100px；
左：-10px；
}
img{
高度：50px；
宽度：50px；
}
导航{
顺序：1；
}
.导航链接{
列表样式：无；
}
.nav_uu链接李{
显示：内联块；
填充：0px 20px；
}
.nav_uu链接李a{
转换：所有0.3秒到0秒；
显示：块；
高度：50px；
宽度：80px；
}
.导航链接李a:悬停{
颜色：#17E5EC
}

您必须指定导航栏的边距大小和位置

例如：

nav{
     margin-top: 25px
   }

同时检查您指定背景颜色的位置。

好的，请参考上面的答案，简要说明您需要什么？阅读你的问题，我认为你需要标签下面的空间。你看到背景（深灰色）是如何延伸到页面的整个窗口的吗？我希望这种颜色能够延伸导航条的整个宽度，但高度应该刚好足以覆盖徽标和“项目”“关于”项目。这有意义吗？很抱歉，如果我解释得很糟糕，那么你需要深灰色的球头，而不是整个身体？只是为了日志和导航栏？导航栏下面应该是不同的颜色吗？像这样的？li，a{字体系列：“蒙特塞拉特”，无衬线；字体重量：500；字体大小：16px；颜色：#edf0f1；文本装饰：无；}这是指定背景颜色的地方。你能详细说明一下吗

nav{
     margin-top: 25px
   }