navbar-fixed-top Bootstrap 下面的空间答案

【问题标题】：Space below navbar-fixed-top Bootstrapnavbar-fixed-top Bootstrap 下面的空间
【发布时间】：2014-04-05 23:42:27
【问题描述】：

在导航栏和内容 div 之间有一个神秘的空间（大约 25 像素）。我正在使用 Chrome 和 1600x900 屏幕分辨率。我已经查看了具有完全相同问题的其他问题，并应用了给出的答案，但问题仍然存在。我已将导航栏的边距底部设置为 0 并覆盖 Bootstrap 3.1.1。 HTML

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
            <title>Title</title>
            <meta name="description" content="">
            <meta name="viewport" content="width=device-width, initial-scale=1">

            <link rel="stylesheet" href="css/bootstrap.min.css">
            <link rel="stylesheet" href="css/hover.css">
            <link rel="stylesheet" href="css/style.css">
            <script src="js/lib/modernizr-2.6.2-respond-1.1.0.min.js"></script>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>   
        </head>

        <body>
                <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <a href="#"><img src="img/title.png"></img></a>
                        </div>
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="#">Home</a></li>
                                <li><a href="#">About</a></li>
                                <li><a href="#">Contact</a></li>
                            </ul>     
                        </div><!-- /.navbar-collapse -->
                    </div><!-- /.container-fluid -->
                </nav>
                <div class="content"></div>           
        </body>

    </html>

CSS

body { 
  padding: 70px 0 0 0;
}
html, body{
  height: 100%;
}
/* Top Navigation Bar */
.navbar-fixed-top {
  background: #F7F7F7;
  min-height: 0;
  height: 45px;
  padding: 5px 0;
  margin-bottom: 0;
}
.navbar-header{
  height: 35px;
  padding: 5px 0;
}
.content{
  width: 100%;
  height: 450px;
  background: rgb(255, 240, 240);
}

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

将正文填充更改为..

body { 
  padding: 45px 0 0 0;
}

http://www.bootply.com/127737

【讨论】：

嘿，这行得通，嗯，但是怎么样？填充物应该会影响身体的顶部吗？我很困惑。那段代码实际上对“body”有什么作用？
啊，它与导航栏的高度相同。我现在明白了。