html - 想要删除容器之间的空间

问题描述

我创建了一个顶部栏菜单（浅绿色）和一个导航菜单（深绿色）。两者之间有一个黑色空间。这是背景，这里是标题（.site-header）。我曾尝试在此元素上使用 margin: 0px ，但没有任何乐趣。

顶部栏和主导航菜单的子元素都设置为 display: inline-block。

HTML

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Music Website</title>
  <meta name="description" content="Music Website">
  <meta name="author" content="SitePoint">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="normalize.css">
  <meta http-equiv="refresh" content= "1.5">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

</head>

<body>
  <script src="js/scripts.js"></script>

    <header class="site-header">
        <div class="top-bar">
            <ul>
                <li class="top-bar-items"><i class="material-icons">call</i>Phone: 088-888-8888<a href="#"></a></li>
                <li class="top-bar-items"><i class="material-icons">email</i>Email: info@music.com<a href="#"></a></li>
                <li class="top-bar-items"><i class="material-icons">access_time</i>Opening Hours: Mon - Fri 9am - 5.30pm<a href="#"></a></li>
            </ul>
        </div>

        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Tours</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>

    </header>
        <div class="site-body">
            <div class="main"></div>
                <aside class="sidebar"></aside>
            </div>

    <footer class="site-footer">
        <p></p>
    </footer>       

</body>
</html>

CSS

.site-header {
    background-color: #000;
    margin: 0px;
}

.top-bar {
    background-color: springgreen;
    margin: 0 auto;
}

.top-bar ul {
    margin: 0px; 
    padding: 5px;
    text-align: center;
}

.top-bar li {
    list-style: none;
    padding: 5px;
    display: inline-block;
}

.top-bar-items {
    margin: 0px;
}

/*.top-bar:after {
    content: "";
    display: block;
    clear: both;
}*/

.top-bar-items i {
    vertical-align: middle;
    padding-right: 5px;
}

nav {
    background-color: seagreen;
    height: 100px;

}

nav li {
    list-style: none;
    padding: 15px;
    display: inline-block;
}

nav li a {
        text-decoration: none;
        color: #000;
        font-family: 'Raleway', sans-serif;
        background-color: orange;
        padding: 5px;
}

页面图片

顶栏和主导航

标签： htmlcss

html - 想要删除容器之间的空间

问题描述

解决方案

推荐阅读