代码之家 › 专栏 › 技术社区 › DV82XL

使用Angular和CSS删除<html>和浏览器边缘之间的外边距-尝试一切

angular css html

DV82XL · 技术社区 · 4 年前

这应该是微不足道的,但我花了2天时间,已经没有想法了。无论我做什么,我都无法删除页面html/body和浏览器窗口边缘之间的外部空白。我希望页面内容与边缘齐平。

我使用的是Angular CLI 9.1.8。Chrome和Edge在Win 10上也存在同样的问题。我在这里创建了一个stackblitz项目来重现这个问题:

视图: https://angular-ivy-hzzyzi.stackblitz.io/
编辑: https://stackblitz.com/edit/angular-ivy-hzzyzi?file=src%2Fapp%2Fapp.component.css

app.component.html:

<!DOCTYPE html>
<html>
  <body>
    How to remove white space between red border and browser edge...
  </body>
</html>

app.component.css:

body, html {
  height: 100%;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid red;
}

红色1px边框就在那里,这样我就可以看到它们的位置,并将被删除。下面是它的样子:

我也尝试过:

display: inline-block;
min-height: 100%;
height: 100vh;
overflow: hidden;
css重置: *{ margin: 0; padding: 0; }
将车身或部件包裹在 <div>
!important 每行末尾

我已经尝试了这些stackoverflow线程中的所有内容,还有更多:

Issue removing margin with HTML/CSS

Make <body> fill entire screen?

Removing body margin in CSS

HTML and CSS margin issues

HTML and CSS --- margin Problems

html css margin(white spaces at webpage edges)

0 回复 | 直到 4 年前

DV82XL 3 年前

根本问题是 <html> 和 <body> app.component.html中的标签。尽管 body{margin:0} 应用于组件的 <身体> ,有一个更高层次的 <身体> 在index.html中添加不需要的边距。要解决此问题,请删除 <html> 和 <身体> 从app.component.html中,将样式移动到styles.css。

这就是我的最终解决方案:

样式.css

body, html {
  height: 100%;
  width: 100%;
  margin: 0 !important;
}

index.html

<!DOCTYPE html>
<html>
  <body>
    <app-root></app-root>
  </body>
</html>

app.component.html

<header>
  <app-main-menu></app-main-menu>
</header>
<main>
  <app-landing-page></app-landing-page>
</main>
<footer>
  <app-footer></app-footer>
</footer>

注:提出了另一种解决方案来设置 body{position: absolute; top: 0; left: 0} 在app.component.css中。这实际上奏效了,但掩盖了问题的真正根源,即错位 <身体> 和 <html> 标签。

-3

Utkarsh Tyagi 4 年前

this is before CSS

This is inspecting element

This is before CSS with code

This is after CSS with code

尝试将universla选择器的边距和填充值更改为零。如果这不起作用,请尝试将不同元素的边距和填充的单独值更改为零。您还可以使用ctrl+shift+i检查每个元素,然后找到干扰布局的元素。

CSS行将是--

*{
margin: 0;
padding: 0;
}

您还必须将填充更改为0,并查看CSS文件是否连接到代码。

这是我所能做的最好的尝试。。