html - Bootstrap 页眉前不需要的空间

标签 html css twitter-bootstrap

刚开始使用 Bootstrap,我试图让 page-header 对齐到页面顶部,页眉开始和网页之间没有空格(就像这个黑色的 StackOverflow 标题一样页)。

同样的代码是:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/bootstrap.min.js" ></script>
    <link rel="stylesheet" href="css/bootstrap.min.css" ></link>
  </head>
  <body>
    <div class="page-header" style="color:#FFFFFF;background-color:#009688;margin-top:0px">
      <h1 style="text-align:center" >Welcome to USICT ATTENDANCE RECORD</h1>
    </div>
    <div class="container-fluid">
      <p style="padding:1em 2em 1sem 2em">The table lists the name of people
          studying in USICT along with their attendance in each subject.
      </p>
      <br/>
      <table class="table table-hover">
        <thead>
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
            <th>Attendance(in %)</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Rahul</td>
            <td>Tyagi</td>
            <td>rahul.1992.tyagi@gmail.com</td>
            <td>70</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

但是我在浏览器的标题和地址栏之间有一个空格,如下图所示:

Gap above the green bar

我试过设置

margin-top:0px;

position:absolute;
top:0px;

两者都不行。

最佳答案

h1 的边距超过了绿色条。

应用以下样式:

<div class="page-header" style="color:#FFFFFF;background-color:#009688;padding:9px 4px;margin-top:0;">
<h1 style="text-align:center;margin-top:10px;">Welcome to USICT ATTENDANCE RECORD</h1>

Working JSFiddle .

关于html - Bootstrap 页眉前不需要的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32165256/

相关文章:

html - Bootstrap 4 使搜索字段在移动设备中响应

css - 如何为小显示尺寸设置 bootstrap col?

css - 引用 node_modules 文件夹中的资源

PHP:将单个数组输出为多个列表

css - 谷歌浏览器中的边距折叠与 <button> 元素的其他浏览器不同

css - 溢出 :hidden not working on Chrome

html - Bootstrap 嵌套列表的一致样式

html - 删除一个负边距并将其替换为不同的值

java - 如何跟踪 GWT 中的 JSNI 错误?

html - CSS 中的 Y 轴滚动?