本文旨在解决 CSS 布局中，当元素的宽度和高度被设置为 100% 时，却未能占据全部可用空间的问题。通过分析浏览器默认样式的影响，并提供清除默认边距和内边距的方法，帮助开发者实现元素占据整个父容器的目标，从而更好地控制页面布局。
在网页开发中，我们经常需要让某个元素占据其父容器的全部空间。通常，我们会将元素的 width 和 height 属性设置为 100%。然而，有时我们会发现，即使这样设置了，元素仍然没有完全占据父容器的空间，这通常是由于浏览器默认样式的影响。
浏览器会对某些 HTML 元素应用默认的样式，其中最常见的就是 body 元素。body 元素默认会带有一定的 margin (外边距)。这种默认的外边距会影响到其子元素的布局，导致子元素即使设置为 width: 100% 和 height: 100% 也无法完全占据 body 的空间。
解决方法：清除默认边距和内边距
要解决这个问题，我们需要清除 body 和 html 元素的默认 margin 和 padding (内边距)。 可以通过以下 CSS 代码来实现：
立即学习“前端免费学习笔记（深入）”；
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
background-color: red; /* 示例样式，可根据需求修改 */
}代码解释：
- html, body { ... }: 这条 CSS 规则同时作用于 html 和 body 元素。
- width: 100%; height: 100%;: 设置 html 和 body 元素的宽度和高度都为 100%，确保它们占据浏览器窗口的全部空间。
- margin: 0; padding: 0;: 这是关键的一步，它将 html 和 body 元素的 margin 和 padding 都设置为 0，从而清除了浏览器的默认样式。
- #container { ... }: 这是你的容器元素，你可以根据需要修改它的样式。
示例：
以下是一个完整的 HTML 示例，展示了如何使用上述 CSS 代码来解决元素未占据全部空间的问题：
<!DOCTYPE html>
<html>
<head>
<title>元素占据全部空间</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
background-color: red;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>在这个示例中，#container 元素将会占据整个浏览器窗口的全部空间，并显示为红色。
注意事项：
- 确保 html 和 body 元素的高度也被设置为 100%。如果只设置了 width 而没有设置 height，则元素可能仍然无法占据全部空间。
- 如果你的页面结构比较复杂，可能需要检查其他元素的 margin 和 padding 是否会影响布局。
- 在某些情况下，可能还需要考虑 box-sizing 属性。 box-sizing: border-box; 可以确保元素的总宽度和总高度包括 padding 和 border，从而更容易控制元素的尺寸。
总结：
通过清除 html 和 body 元素的默认 margin 和 padding，我们可以有效地解决元素宽度和高度设置为 100% 时未占据全部空间的问题。 这种方法简单易懂，适用于大多数情况。在实际开发中，我们需要根据具体的页面结构和需求，灵活运用 CSS 属性，才能实现完美的布局效果。
