Question

当我做一个有角度的项目时，当我发出ng serve命令时，一切似乎都很好，但是过了一会儿，我注意到div和html之间有一个奇怪的空间，无论我做什么，这个空间都不会似乎去了。在这个角度项目中，实际上只有一个div。它好像div有一个我没有控制的边界。即使在打开控制台并检查了元素之后，我发现也没有填充或边距，它只是纯div，在屏幕与其自身之间有一定空间，但是为什么以及如何删除它，因为它通常不存在。

我尝试过c属性，例如o padding或margin，但无济于事，但事实是这个空间不应该放在这里。

app.component.css

*{
    margin: 0;
    padding: 0;
}

app.component.html

<div style="text-align:center; height: 50px; background-color: black;">
</div>

多数民众赞成在其中的所有HTML。

picture of the html

The inspect element view of div

The inspect element view of HTML

Answer 1

您可以通过在CSS中使用margin至*来删除空格

* {
 margin: 0;
 background-color:blue;
}

<div style="text-align:center; height: 50px; background-color: black;">
</div>

没有margin

的示例代码

html{
  background-color:blue;
}

<div style="text-align:center; height: 50px; background-color: black;">
</div>

Answer 2

看起来您可能正在尝试设置组件的host元素的样式？试试这个：

:host {
  margin: 0;
  padding: 0;
}

Link to docs

组件css中的样式适用于html 内部您的组件，但不适用于表示组件本身的元素。如果您要讨论整个页面，则需要在styles.css文件中使用一些全局CSS或从正文中删除边距和填充的内容：

body {
  margin: 0;
  padding: 0;
}

如果您的组件包含在其他html或组件中，则它们可能会有一些填充或边距，您也需要对其进行修改。

如何删除div和html之间的多余空间？

2 个答案: