如何为我的div消除这个额外的空白区域？

Question

我用create-react-app cli创建了这个应用程序，我无法摆脱主容器顶部，左侧和右侧的这些额外的空白区域。看一下下面的截图。我只有一个div用于此应用程序，我有以下css的div。

.mainContainer{
	display: flex;
	flex-direction: column;
	background-color: black;
}

我所尝试的是为0px设置边距和填充，但它们都不起作用。

Answer 1

html, body { margin: 0; padding: 0 }

Answer 2

您可以右键单击页面，选择Inspect，您将能够看到此边距/填充的来源。将出现一个控制台，将鼠标移到HTML元素上以查看页面元素上的颜色叠加。您将能够看到CSS正在执行此操作并进行调整。

我认为你可以通过这样做.mainContainer { padding: 0, margin: 0 }来摆脱它，但也许你只需要重置填充或边距，而不是两者。