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

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

angular css html
  •  0
  • DV82XL  · 技术社区  · 5 年前

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

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

    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边框就在那里,这样我就可以看到它们的位置,并将被删除。下面是它的样子:

    enter image description here

    我也尝试过:

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

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

    0 回复  |  直到 5 年前
        1
  •  2
  •   DV82XL    4 年前

    根本问题是 <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> 标签。

        2
  •  -3
  •   Utkarsh Tyagi    5 年前

    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文件是否连接到代码。

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

    推荐文章
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号