Question

我开始使用css并且有基本问题。

我有一个div元素：

.top {
  background-color: #3B5998;
  margin-left: 0px;
  margin-top: 0px
}

<div class="top">...</div>

颜色代码生效（好）。

我遇到的问题是div左侧，顶部和右侧似乎有一些空白区域。如何摆脱白色空间？例如，如果您查看Facebook页面，顶部是完全蓝色，顶部没有空白区域。

Answer 1

您需要在样式表中重置默认的填充和边距属性：

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

正如@Jason McCreary所提到的，你还应该考虑使用重置样式表。他链接到的那个，Eric Meyer的CSS重置，是一个很好的起点。

看起来你的css中缺少一个分号，它应该如下所示：

.top
{
    background-color:#3B5998;
    margin-left:0px;
    margin-top:0px;
}

Answer 2

页面的padding上有<body>。你可以像这样解决这个问题：

body
{
    padding: 0;
}

Answer 3

如果在div中需要填充，则应选择填充：

padding:top right bottom left;

示例：

padding:5px; /* 5px padding at all sides)*/
padding:5px 3px; /* top & bottom 5px padding but right left 3px padding) */
padding:5px 3px 4px; /* top 5px, bottom 4px padding but left right 3px) */
padding:1px 2px 3px 4px; /* top 1px, right 2px bottom 3px & left 4px) */

与控制div外部空间类似，您可以使用保证金。

保证金将使用完全相同的公式。

Answer 4

经过很长一段时间，我找到了正确的解决方案：

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

我们需要在水平方向定义溢出。

Answer 5

如果其他答案无效，请尝试display:flex或{{1}}。

Answer 6

我遇到了同样的问题。试试这个：

html, body {
    margin-top:-13px;
}

Answer 7

我用过这个，它对我有用：

body {
    background-position: 50% 50%;
    margin:0px;
    padding:0px !important;
    height:100%;
}

Answer 8

我最近也有这个问题，但即使我使用填充：0px甚至添加了！重要的身体没有解决它...实际的问题是它的位置...你可以通过使用背景 - 职位：50％50％;或者自动让它选择屏幕的中心位置..这是边距：0自动;或保证金：auto;那为我解决了...也希望你们所有人。我意识到保证金是我试过@HAS的回复所需要的，感谢男人你真棒...对不起zombify帖子

Answer 9

保证金：0px;会删除元素周围的所有空格。

填充：0px;清除内容周围的区域

你可以尝试：

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

有保证金：自动;浏览器计算保证金。

您也可以使用

* {margin: 0px; padding: 0px;}

这将删除所有默认边距和空格。但使用时要小心：

position: absolute;

'position'属性可以取4个值，静态，相对，固定和绝对。然后，您可以使用top，bottom，left，right属性来定位元素。这取决于您的布局。此链接可能很有用https://www.w3schools.com/css/css_margin.asp

删除div左上角和右上角的空格

9 个答案: