删除html外部的空白

Question

我正在使用 Gridstack 库开发 Angular 应用程序。 我有一个网格，上面有很多元素，所以我必须滚动 y 才能看到所有元素。 当我删除所有项目（使用 grid.removeAll()）时，网格的大小会自行调整，但在整个 html 代码后面有一个空白（与之前的网格大小相同）。

当我检查这个空白区域时，它不包含在任何分区中。甚至我的部门也比它先结束了。 当我在页面上执行某些操作（例如单击按钮或将鼠标放在具有“鼠标悬停”属性的分区上）时，该空白区域会立即消失。但如果我只滚动，它就会留在这里。

我使用 Gridstack，但对我来说，问题不是来自我的网格，因为它在删除元素后可以很好地调整大小，并且空白区域位于其外部。

我的页面高度也超过 100%，所以这不是问题

在此输入图像描述 在此输入图片描述

我尝试删除所有边距和边框，但没有任何效果。

* { margin : 0 ;  box-sizing: border-box }

Answer 1

要删除 HTML 内容外部的空白（通常表现为整个文档周围不需要的边距或填充），您通常需要重置正文和 HTML 元素的默认边距和填充。

1. 使用 CSS 重置

CSS 重置有助于删除浏览器应用的默认样式。最常见的重置是将所有元素的边距和填充设置为零。

2. 删除特定元素的边距和填充

这是应用 CSS 文件重置的示例：

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: yellow;
    }

应用这些样式可确保 HTML 内容周围不会添加默认边距或填充，从而有效删除不需要的空白。