双栏布局中padding控制栏内内容与边界的距离，margin控制栏间及与父容器的距离；需分清层级：父容器设整体留白，子栏设自身内容呼吸感和间隙；box-sizing应设为border-box防溢出。

双栏布局中，内边距（padding）控制栏内内容与栏边界距离，外边距（margin）控制栏与栏之间、栏与父容器之间的距离；混用或忽略盒模型会导致宽度溢出、错位或居中失效。

双栏容器的 margin 与 padding 分别该设在哪一级

必须分清层级：父容器（如 .layout）负责整体留白和栏间间距，子栏（如 .sidebar、.main）负责自身内容呼吸感。

• margin 通常只设在子栏上——比如 .sidebar { margin-right: 20px; } 或 .main { margin-left: 20px; }，避免用 margin 挤开父容器宽度
• padding 推荐设在子栏内部，例如 .sidebar { padding: 16px; }，让文字/列表不贴边
• 若父容器本身需离浏览器边缘留空，应设 padding（如 .layout { padding: 24px; }），而非 margin，否则可能触发外边距合并（margin collapse）

float / flex / grid 下 margin 行为差异明显

不同布局方式对 margin 的处理逻辑完全不同，直接套用会出错。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• float 布局：子栏加 margin 容易导致换行，尤其当 width + margin 超过父容器；建议用 margin-right 控制间隙，且必须清除浮动
• flex 布局：优先用 gap（如 display: flex; gap: 20px;），比手动设 margin 更安全；若仍用 margin，注意首尾栏的额外间隙问题
• grid 布局：用 grid-gap 或 gap（如 grid-template-columns: 250px 1fr; gap: 20px;），margin 应仅用于子栏内部微调，不参与列间距计算

为什么双栏总被撑出水平滚动条

这是最常踩的坑：未考虑 box-sizing 和边框/内边距对宽度的实际占用。

立即学习“前端免费学习笔记（深入）”；

• 默认 box-sizing: content-box，此时 width: 300px; padding: 16px; 实际占宽是 332px
• 解决方案：全局加 * { box-sizing: border-box; }，或至少给双栏元素显式声明 box-sizing: border-box;
• 若用百分比宽度（如 width: 30%; margin-right: 20px;），margin 是像素值，可能导致总和超 100%，建议改用 flex 或 grid 配合 gap
• 检查是否误给 body 或父容器设了 margin，尤其浏览器默认 body { margin: 8px; } 未重置时，会叠加放大问题

真正难的不是写对某一行 padding，而是判断这个值该由谁承担——是父容器的 padding，还是子栏的 margin，还是布局容器的 gap。选错层级，后面所有微调都在补洞。