移除div元素左上角和右上角的间距

Question

移除div元素左上角和右上角的间距

18

我开始学习css，遇到了一个基础问题。

我有一个div元素:

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

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

颜色代码正在生效（好的）。

我的问题是，div左侧、顶部和右侧似乎有一些空白。我该如何去掉这些空白呢？例如，如果你看 Facebook 页面，顶部部分完全是蓝色的，没有任何白色空间。

- Bruce

虽然这个问题可能有一个具体的答案，但你应该考虑使用一个重置样式表。 - Jason McCreary

9个回答

4

页面的 <body> 上有 padding。您可以通过以下方式解决此问题：

body
{
    padding: 0;
}

- Marty

谢谢。我已经做出了更改，但问题仍然存在。 - Bruce

尝试 *{margin: 0; padding: 0; } - Marty

2

我有同样的问题。只需尝试这个：

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

- mhk

1

如果您需要在 div 内部添加一些填充，您应该选择 padding:。

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外部空间类似，您可以使用margin。

Margin将使用完全相同的公式。

- kheya

1

如果其他答案不起作用，请尝试使用position:absolute; top: 0px; left: 0px;或display:flex。

- Noumenon

1

在很长一段时间后，我找到了适合我的正确解决方案:

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

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

- monteirobrena

那很糟糕。你永远无法水平滚动！ - John Strood

0

margin: 0px; 可以移除元素周围的所有空白。

padding: 0px; 清除内容周围的区域。

你可以尝试：

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

使用margin:auto;时，浏览器会计算出一个边距。

你也可以使用

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

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

position: absolute;

'position' 属性可以取 4 个值：static、relative、fixed 和 absolute。然后，您可以使用 top、bottom、left、right 属性来定位元素。这取决于您的布局。此链接可能会有所帮助 https://www.w3schools.com/css/css_margin.asp

- Ananda

请提供一个简短的描述，说明这个程序是如何工作的或者为什么会这样工作。 - jpaugh

我没有超能力（也没有点踩），但我认为这个问题现在好多了。 - jpaugh

0

我用过这个，对我很有效：

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

- Marcos

0

最近我遇到了同样的问题，但即使我使用了padding:0px并在body上添加了!important也没有解决它...实际的问题是它的位置...你可以通过使用background-position:50% 50%;或自动让它选择屏幕中心位置...也就是margin:0 auto;或margin:auto;来解决这个问题，这对我很有帮助...希望对你们也有用。在尝试了@HAS的回复后，我意识到需要的是margin，谢谢你，你太棒了...抱歉打扰了这篇文章。

- George Zaharia

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- rolling stone · Accepted Answer

你需要在样式表中重置默认的填充（padding）和边距（margin）属性：

```html

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

```

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

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

另外，您的CSS中似乎缺少了一个分号，应该按照以下方式编写：

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