外边距与内边距

Margin & Padding

样式与 CSS也叫：margin、padding、内外边距、间距

一句话：内边距是边框以内、内容周围的空间，外边距是边框以外、这个元素和其他元素之间的距离。

详细解释

把元素想成一个箱子：padding（内边距）是箱壁和里面物品之间的填充，margin（外边距）是这个箱子和旁边箱子之间的空隙。一个简单的判断方法：背景色会铺到内边距里，不会铺到外边距里。想让按钮变大、文字离边框远一点，用 padding；想让两张卡片分开，用 margin。

padding: 8px 16px 表示上下 8px、左右 16px。普通排版中上下相邻的两个元素，外边距会合并成较大的那个而不是相加，这叫外边距折叠，常让人困惑。

在 Flex 和 Grid 里，子元素之间的距离更推荐用 gap，比给每个子元素写 margin 省事。

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

按钮太挤了，请把按钮内边距改成上下 10px、左右 20px，让文字离按钮边缘远一点；按钮组里的按钮之间用 gap 设置 12px 间距，不要给每个按钮单独写 margin；按钮组和上方表单之间保持 24px 外边距。