【问题标题】:Why does my page header have gaps around it without color?为什么我的页眉周围有没有颜色的空白?
【发布时间】:2013-12-11 19:33:11
【问题描述】:

我试图用背景色填充整个<header>,但问题是当我尝试查看页面时,不是用颜色填充整个<header>,而是顶部有白色边框,<header> 的左侧和右侧。我可以知道背景颜色没有完全填满整个<header> 空间的原因吗?

header {
  background-color: #ECF3F3;
}
<body>
  <header>
    <h1>Food Hunt</h1>
  </header>
  <nav>
  </nav>
  <aside>
  </aside>
  <footer>
  </footer>
</body>

【问题讨论】:

    标签: html css


    【解决方案1】:

    这可能是由bodyhtml 元素上的边距/填充引起的,但也可能是由h1 元素上的边距引起的。

    看到这个jsFiddle

    header {
        background-color: pink;
    }
    
    header h1 {
        margin: 0;
    }
    
    html, body {
        margin: 0;
        padding: 0;
    }
    <header>
        <h1>Title</h1>
    </header>

    【讨论】:

      【解决方案2】:

      在你的css表的顶部添加

      * {
        margin: 0;
        padding: 0;
      }
      

      这会将页面边距和内边距属性重置为 0,从而允许背景颜色属性填充 .

      【讨论】:

      • 我不推荐这个。您将留下所有混合在一起的段落和列表,并且需要应用新的间距。最好更具体。
      • 这有点像轻量级的 CSS 重置。一些开发人员更喜欢完全重置 css 默认值。让他们更好地控制每个元素。这是我一直使用的 css 重置,在这种情况下也可能会有所帮助:meyerweb.com/eric/tools/css/reset
      【解决方案3】:

      默认情况下,所有 HTML 文档的四个角都有一个边距。 因此,每次创建新的 HTML 页面/模板时,您都必须明确删除此边距。

      以下内容可以帮助您删除 HTML 页面附带的默认边距:

      body{
          padding:0;
          margin:0;
      }
      
      header{
          background-color:#ECF3F3;
      }
      

      这应该会去除不需要的白色。

      演示:http://jsbin.com/OVAnowe/1/

      【讨论】:

        【解决方案4】:

        默认情况下,HTML 将应用填充和边距试试这个:

        header h1{border: 0; margin: 0;}
        *{border: 0; margin: 0;}
        

        现在任何头部内部都将呈现没有边距或边框,使用 * 应用于所有元素也是如此

        http://jsfiddle.net/LXAJg/

        【讨论】:

          【解决方案5】:

          在你的 CSS 中添加这个:

           body {
              height:100%;
              margin:0;
              padding:0
          }
          h1 {
              margin:0;
              padding:0
          }
          

          看小提琴:

          http://jsfiddle.net/SN3e3/

          【讨论】:

            【解决方案6】:

            它确实用背景颜色填充整个标题。

            您会看到正文或 html 元素的边距或内边距。

            【讨论】:

              猜你喜欢
              • 2017-08-26
              • 1970-01-01
              • 2015-07-06
              • 2017-10-28
              • 1970-01-01
              • 2021-12-28
              • 2019-09-22
              • 1970-01-01
              • 1970-01-01
              相关资源
              最近更新 更多