Question

无论出于何种原因，我似乎无法在我的搜索引擎中输入正确的字词。这似乎是一件非常容易的事情。让我们说我有简单的标记如下：

<div>Hello!</div>

我应用以下样式：

body {
  background: blue;
}

div {
  background: green;
  width: 100%;
}

理想情况下，我希望绿色能够在整个屏幕上伸展，但无论出于何种原因，窗口两端和div之间都有一个缓冲区，即蓝色。当我去检查div时，我注意到有0个填充/边距，只有内容框。当我检查HTML元素时。它只是没有填充/边距的内容。

我想我的问题是，如何摆脱html和包含div之间的蓝色缓冲区？我成功完成它的唯一方法是div的负利润，但这看起来很糟糕。有什么想法吗？

Answer 1

即使没有应用任何CSS，每个浏览器都会执行一些default styling个元素。这包括body元素的边距。要覆盖这些默认样式（您可以通过浏览器的开发人员工具进行检查，如果有的话 - 例如通过Chrome中的 F12 ），您只需相应地设置自定义CSS规则。对于您的具体问题，您应该将margin: 0添加到body代码的样式中。

现在，由于每个浏览器都有不同的默认值，许多开发人员决定在应用自己的样式之前完全重置样式。这可以使CSS开发过程更加一致和简化。有几种可用的重置样式，一种是着名的Eric Meyer's CSS reset。

Answer 2

Body元素在每个方向都有8px长的默认边距，所以只需重写此默认值。

body {
   margin: 0;
   background: blue;
}

@Edit： ...这也是使用“开发人员工具”练习的好例子。有很好的指南：https://developers.google.com/web/tools/chrome-devtools/inspect-styles/

Answer 3

如果您有类似问题，请咨询CSS box model。你只需要从身体上移除边距。

＆＃13;

body {
  background: blue;
  margin: 0px
}

div {
  background: green;
  width: 100%;
}

＆＃13;

<div>Hello!</div>

＆＃13;

如何使元素占用html元素的宽度？

3 个答案: