Question

我不是HTML或CSS的新手，但我真的不知道为什么会这样。我可能只是愚蠢，这是一个简单的问题，这是非常错误的。我真的遇到了麻烦。我有一个非常简单的网页，带有div元素。无论我做什么，我的顶部，侧面和底部仍然有空间。这是一张照片。

这是我的HTML和CSS代码。

 <!DOCTYPE html>
    <html>
    <head>
    <title>Home</title>
    <style>
      .SideBar {
        background: #4c4c4c;
        float: left;
        height: 100%;
        margin-left: 0px;
        padding-right: 25px;
      }
    </style>
    </head>
     <body style="background-color: #05bcff">
       <div class="SideBar">
          <p style="margin: 0px; padding: 0px">
            asd
          </p>
        </div>
      </body>
    </html>

Answer 1

您应该在样式中将margin 0和padding 0分配给body元素。

Answer 2

这是因为<body>元素在某些浏览器中默认具有边距。不同的浏览器可以选择将一些基本的默认样式应用于元素。例如，Chrome默认添加8px的保证金。如果你设置

body {
  margin: 0px;
}

这会消失。

更好的方法是在代码中加入Reset.css或Normalize.css。 Reset.css将完全取消所有内容，因此您所写的内容正是显示的内容。这为您提供了最大程度的控制，但对于大多数情况来说，它太多了。例如，应用Reset.css后，<h1> , <h2> , <h3>..标记看起来都一样。

另一方面，

Normalize.css保留了有用的样式，但确保在所有浏览器中一致地呈现元素。在大多数情况下，这是首选。

在Codepen中你甚至可以尝试这些。如果单击“设置”，您可以选择在CSS中包含“标准化”或“重置”。您可以使用它们来查看元素在每个元素下的显示方式。

Answer 3

正如Frontend员工所说，只需添加

.body{
    margin: 0;
    padding: 0;
}

很多人在其样式表的顶部使用CSS重置代码，其中包括此代码。它基本上是一个默认覆盖列表，清除元素上的任何样式，允许您从一个干净的平板开始见（http://cssreset.com/scripts/html5-doctor-css-reset-stylesheet/）

Html元素不能一直向左对齐

3 个答案: