HTML 元素（尤其是 和 ）自带浏览器默认 margin，常导致页面四周或段落间出现不可见但影响布局的空白；只需重置全局 margin 和 padding 即可解决。
html 元素（尤其是 `
` 和 ``）自带浏览器默认 margin，常导致页面四周或段落间出现不可见但影响布局的空白；只需重置全局 margin 和 padding 即可解决。
在初学 HTML/CSS 时，你可能会发现：即使未显式设置任何样式，<div> 或其他块级元素在页面中仍会与视口边缘保持一段“神秘距离”——这并非代码错误，而是浏览器内置的<strong>用户代理样式表（User Agent Stylesheet）</strong>所致。其中最典型的就是 <code> 元素默认拥有 8px 的外边距（margin: 8px），而 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a>
<p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur</p>
</div>
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 标签也自带上下 1em 的 margin。
要彻底消除这类意外空白，推荐采用「CSS 重置」（Reset）策略，而非逐个元素调试。最简洁有效的方式是在 CSS 文件开头添加全局归零规则：
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}✅ 这段代码的作用：
-
*选择器匹配所有元素（含、<div>、<code><p></p>等）； -
margin: 0; padding: 0;消除默认内外边距； -
box-sizing: border-box;确保宽高包含 padding 和 border，避免尺寸计算偏差（已存在于原代码中，保留即可）。 - 避免仅重置
body { margin: 0; }—— 这无法解决<p></p>、<h1></h1>、<ul></ul>等其他元素的默认间距； - 不建议在生产项目中无差别使用
*重置（可能影响表单控件等特殊元素的可访问性），但对学习和原型开发完全安全且高效； - 若使用
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;
}完成上述修改后，两个并排 <div> 将紧贴视口边缘无缝排列，不再受浏览器默认样式干扰。这是前端开发中「控制权回归开发者」的第一课：<strong>不要假设默认值为零，主动重置，方得精准布局。</strong>
</div>
