Bootstrap与HTML中Div间多余间距消除方案咨询

我看了你的代码，问题主要来自浏览器和Bootstrap的默认样式，咱们一步步来修复：

问题根源 #

1. 浏览器默认给body设置了margin: 8px，这会让页面四周出现空白
2. Bootstrap的.navbar-default默认带有margin-bottom: 20px，这会让导航栏和下面的主体区域产生间隙
3. 你代码里还有个小错误：header class=".cred"里的点是多余的，类名不需要带点

具体修复步骤 #

1. 重置body的默认margin #

把body的style改成：

<body style="background:black; margin: 0;">

2. 移除导航栏的底部margin #

给导航栏添加margin-bottom: 0的样式，修改nav标签：

<nav class="navbar navbar-default navbar-static-top navtopo" style="margin-bottom: 0;">

3. 修正多余的类名点 #

把<header class=".cred">改成<header class="cred">

4. 可选：移除主体区域的默认间距 #

如果还有细微间隙，可以给下面的container-fluid添加padding-top: 0：

<div class="container-fluid text-center " style="padding-top: 0;">

修改后的完整代码 #

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <title>Sibcom - Layout</title>
    <meta charset="utf-8">
    <!-- ===== Arquivos css -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body style="background:black; margin: 0;">
    <div>
        <!-- ===== Página -->
        <header class="cred">
            <nav class="navbar navbar-default navbar-static-top navtopo" style="margin-bottom: 0;">
                <div class="container">
                    <div class="navbar-header">
                        <!-- Collapsed Hamburger -->
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
                            <span class="sr-only">Toggle Navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <!-- Branding Image -->
                        <a href="#" class="navbar-brand">
                            <div class="logo-grande">
                                <span>System Testing </span>
                            </div>
                        </a>
                    </div>
                    <div class="collapse navbar-collapse" id="app-navbar-collapse">
                        <!-- Left Side Of Navbar -->
                        <ul class="nav navbar-nav">
                            <!--&nbsp; -->
                        </ul>
                        <!-- Right Side Of Navbar -->
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="">Perfil</a></li>
                            <li><a href="">Logout</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>
        <!-- ===== Corpo -->
        <div class="container-fluid text-center " style="padding-top: 0;">
            <!-- ===== Content -->
            <div class="row content ">
                <!-- ===== Menu vertical -->
                <div class="col-sm-2 sidenav " style="text-align:left;background:#DCDCDC;">
                    <div>
                        <h4>Bruno </h4>
                        <h5>Analist</h5>
                    </div>
                    <hr>
                    <p><a href="#">Home</a></p>
                    <p><a href="#">Create</a></p>
                    <p><a href="#">Os</a></p>
                    <p><a href="#">E</a></p>
                </div>
                <div class="col-sm-10">
                    <header class="sombra" style="background:white;color:black;padding:10px;text-align:left;">
                        <h5> Home / Client / </h5>
                    </header>
                    <br>
                    <div style="background:white;color:black;text-align:left;">
                        <header class="sombra" style="padding:10px">
                            <h3> Gerenciamento de Clientes </h3>
                        </header>
                        <div style="padding:30px">
                            <!-- Formularios e Tabelas -->
                            <form>
                            </form>
                            <!-- Formularios e Tabelas Fim -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- ===== Content Fim -->
        </div>
        <footer class="container-fluid text-center navbar-fixed-bottom" style="background:blue;">
            <p>Sibcom 2018</p>
        </footer>
    </div>
</body>
</html>

这样修改后，导航栏和主体区域就会紧密衔接，不会出现黑色间隙了。另外我还修正了代码里未闭合的h5标签，避免出现布局异常。

内容的提问来源于stack exchange，提问作者Bruno Silva