css边距margin与内边距padding设置方法

margin控制元素外间距，padding控制内边距；两者均可通过单、双、三、四值或单独方向设置，配合box-sizing:border-box可精准布局，避免默认间距影响，提升页面结构清晰度与可读性。

在CSS中，margin（外边距）和padding（内边距）是控制元素间距的两个核心属性。它们决定了元素与其他元素之间的距离以及内容与边框之间的空间。

margin 外边距设置方法

margin 用于设置元素边框以外的空间，影响元素与其他元素之间的距离。可以单独设置四个方向，也可以统一设置。

• 单值写法：margin: 10px; —— 四个方向都是10px
• 双值写法：margin: 10px 20px; —— 上下为10px，左右为20px
• 三值写法：margin: 10px 20px 30px; —— 上=10px，左右=20px，下=30px
• 四值写法：margin: 10px 20px 30px 40px; —— 顺时针：上右下左
• 单独设置：margin-top、margin-right、margin-bottom、margin-left
• 自动居中：margin: 0 auto; 可使块级元素在父容器中水平居中

padding 内边距设置方法

padding 用于设置元素内容与边框之间的空间，增加内容周围的空白区域。

法语写作助手

法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

31

查看详情

• 单值写法：padding: 15px; —— 四个方向都留15px内边距
• 双值写法：padding: 10px 20px; —— 上下10px，左右20px
• 三值写法：padding: 10px 20px 30px; —— 上=10px，左右=20px，下=30px
• 四值写法：padding: 10px 20px 30px 40px; —— 上右下左依次设置
• 单独设置：padding-top、padding-right、padding-bottom、padding-left
• 注意：padding 会增加元素的实际宽度和高度（除非 box-sizing 被设置为 border-box）

box-sizing 的影响

默认情况下，元素的 width 和 height 只包含内容区域。当设置了 padding 或 border 后，元素总尺寸会变大。使用 box-sizing: border-box; 可以让 padding 和 border 包含在 width/height 内部，更便于布局控制。

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

*, *::before, *::after { box-sizing: border-box; }

常见使用场景

• 用 margin 分隔不同区块或段落，避免内容贴边
• 用 padding 提升文字可读性，比如在 div 中加内边距让文字不紧贴边框
• 清除默认 margin 和 padding：body, p, h1~h6, ul, li 等标签常有默认间距，建议初始化时清零

以上就是css边距margin与内边距padding设置方法的详细内容，更多请关注php中文网其它相关文章！