HTML 元素（尤其是 和 ）自带浏览器默认 margin，常导致页面四周或段落间出现不可见但影响布局的空白；只需重置全局 margin 和 padding 即可解决。 HTML 元素（尤其是 `` 和 ``）自带浏览器默认 margin，常导致页面四周或段落间出现不可见但影响布局的空白；只需重置全局 margin 和 padding 即可解决。在初学 HTML/CSS 时，你可能会发现：即使未显式设置任何样式， 或其他块级元素在页面中仍会与视口边缘保持一段“神秘距离”——这并非代码错误，而是浏览器内置的用户代理样式表（User Agent Stylesheet）所致。其中最典型的就是 元素默认拥有 8px 的外边距（margin: 8px），而 标签也自带上下 1em 的 margin。要彻底消除这类意外空白，推荐采用「CSS 重置」（Reset）策略，而非逐个元素调试。最简洁有效的方式是在 CSS 文件开头添加全局归零规则：* { box-sizing: border-box; margin: 0; padding: 0; }✅ 这段代码的作用：* 选择器匹配所有元素（含 、、 等）；margin: 0; padding: 0; 消除默认内外边距；box-sizing: border-box; 确保宽高包含 padding 和 border，避免尺寸计算偏差（已存在于原代码中，保留即可）。⚠️ 注意事项：避免仅重置 body { margin: 0; } —— 这无法解决 、、 等其他元素的默认间距；不建议在生产项目中无差别使用 * 重置（可能影响表单控件等特殊元素的可访问性），但对学习和原型开发完全安全且高效；若使用 float 布局（如本例中的 .box { float: left; }），务必配合 .clearfix 清除浮动，否则父容器高度会塌陷——你已正确实现了伪元素清除法，值得肯定。最终，完整且健壮的 CSS 应如下所示：* { box-sizing: border-box; margin: 0; padding: 0; } .box { float: left; width: 50%; } #box1 { background-color: grey; } #box2 { background-color: lightblue; } .clearfix::after { content: ""; display: table; clear: both; }完成上述修改后，两个并排 将紧贴视口边缘无缝排列，不再受浏览器默认样式干扰。这是前端开发中「控制权回归开发者」的第一课：不要假设默认值为零，主动重置，方得精准布局。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！