【问题标题】:How to remove white space left and right side of page?如何删除页面左右两侧的空白?
【发布时间】:2021-11-22 13:08:54
【问题描述】:

我正在尝试制作页脚,但左侧和右侧显示了一些空白。如何去除空白?

这是我的代码:

<html>
<head>
  <style>
    footer {
      background: none repeat scroll 0% 0% #DFDFDE;
      padding: 120px 0px;
      text-align: center;
      position: relative;
    }
    .divider {
      background: url('http://evablackdesign.com/wp-content/themes/ebd/images/footer-border.png')
      repeat-x scroll center center transparent;
      height: 7px;
      width: 100%;
      position: absolute;
      top: -6px;
    }
    .container {
      width: 930px;
      margin: 0px auto;
    }
  </style>
</head>
<body>
  <footer>
    <div class="divider"></div>
    <div class="container">
      <h1>hiiiiiiiii</h1>
      <br>
      <h2>buyyyyyyyyyyyy</h2>
    </div>
  </footer>
</body>
</html>

image of footer

标签定义文档或部分的页脚。

一个元素应该包含有关其包含元素的信息。

页脚通常包含文档的作者、版权信息、使用条款的链接、联系信息等。

【问题讨论】:

    标签: html css


    【解决方案1】:

    正文有一个默认边距。通过以下方式删除它:

    html,body {
        margin:0;
        padding:0;
    }
    

    【讨论】:

    【解决方案2】:

    大多数 Web 浏览器的基本边距和内边距都有不同的默认设置。这意味着,如果您没有在 body 和 html 标签上设置边距和内边距,您可能会在页面上得到不一致的结果,具体取决于您用于查看页面的浏览器。

    解决这个问题的最好方法是将html和body标签上的所有边距和内边距设置为0:

    html, body {
        margin: 0px;
        padding: 0px;
    } 
    

    【讨论】:

      【解决方案3】:
      *{
      width: 100%;
      height: 100%;
      padding: 0px;
      margin: 0px;
      overflow-x: hidden;
      }
      

      【讨论】:

        【解决方案4】:

        你的身体有一个默认的边距和内边距,你需要覆盖它。 在样式类型的开头。

        body{
           padding: 0;
           margin: 0;
           box-sizing: border-box
        }
        

        【讨论】:

        • 你能解释一下box-sizing是什么吗?
        • 你可以查看这个链接 => box-siziing 解释得很好。
        • 是的,但你能解释一下它在这种情况下的帮助吗?
        【解决方案5】:

        将此添加到您的样式标签...

        body {
          margin: 0;    
        }
        

        【讨论】:

        • 并非所有浏览器都为此使用正文边距;请参阅 j08691 的答案以获得更可靠的解决方案。
        【解决方案6】:

        只需确保将此类添加到您的 CSS 样式中即可。

        .container-fluid {
          width: 100%;
          margin: 0px;
          padding: 0px;
        }
        

        【讨论】:

          【解决方案7】:

          试试这个代码:

          html, body {
            width: 100%;
            margin: 0; 
            padding: 0; 
            overflow-x: hidden;
          }
          

          【讨论】:

            【解决方案8】:

            试试这个;这是最简单的,将其添加到您的正文选择器中。

            body {
                margin: 0px;
                padding: 0px;
                width: 100%;
            }
            

            【讨论】: