如何去除下边距答案

【问题标题】：How to remove bottom margin如何去除下边距
【发布时间】：2021-07-24 03:53:36
【问题描述】：

我是第一次练习引导程序并且遇到了很大的问题。在这里，我在导航栏的顶部和底部添加了两条水平线。我在导航栏和金色水平线之间的底部有一个意外的边距。 <div style="height:10px; background: rgb(228, 240, 1)"></div>这个。请帮忙。

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

    



    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="CSS/styles.css">
    
    <title>Document</title>
</head>
<body>
    <!-- Nav-Bar -->
    <div style="height:10px; background: rgb(228, 240, 1)"></div>
        <nav class= "navbar navbar-expand-lg bg-dark navbar-dark">
            <div class="container">
                <a href="#" class="navbar-brand">Umair Tahir</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarcollapseCMS">
                    <span class="navbar-toggler-icon"></span>
                  </button>
                
                <div class="collapse navbar-collapse" id="navbarcollapseCMS">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item">
                            <a href="MyProfile.php" class="nav-link"> <i class="fas fa-user text-success"></i> My Profile</a>
                        </li>
                        <li class="nav-item">
                            <a href="Dashboard.php" class="nav-link">Dashboard</a>
                        </li>
                        <li class="nav-item">
                            <a href="Posts.php" class="nav-link">Posts</a>
                        </li>
                        <li class="nav-item">
                            <a href="Categories.php" class="nav-link">Categories</a>
                        </li>
                        <li class="nav-item">
                            <a href="Admins.php" class="nav-link">Manage Admins</a>
                        </li>
                        <li class="nav-item">
                            <a href="Comments.php" class="nav-link">Comments</a>
                        </li><li class="nav-item">
                            <a href="Blog.php?page=1" class="nav-link">Live Blog</a>
                        </li>
                    </ul>
                        <ul class="navbar-nav ml-auto">
                            <li class="nav-item"><a href="Logout.php" class="nav-link text-danger"> <i class="fas fa-user-times"></i>Logout</a></li>
                        </ul>  
                      
                </div>
            </div>
        </nav>
        <div style="height:10px; background: rgb(228, 240, 1)"></div>  
    
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

【问题讨论】：

将其添加到您的 CSS 或标记 - .navbar { margin-bottom: 0!important; }

标签： html bootstrap-4 navbar

【解决方案1】：

对于引导编码样式，使用 bootstrap spacing utilities 调整边距。

要移除下边距，请添加mb-0 bootstrap 类（对应于margin-bottom: 0 css 样式）：

<nav class="navbar navbar-expand-lg bg-dark navbar-dark mb-0">

【讨论】：

【解决方案2】：

bootstrap.css 中的导航栏类默认包含命令 margin-bottom: 20px。

这里要去掉边距，可以在带有nav标签的那一行添加如下命令；

style = "margin-bottom: 0px;"

最终版本；

<nav class= "navbar navbar-expand-lg bg-dark navbar-dark" style="margin-bottom: 0px;">

【讨论】：