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 用于设置元素内容与边框之间的空间，增加内容周围的空白区域。
Waymark
Waymark是一个视频制作工具，帮助企业快速轻松地制作高影响力的广告。
79 查看详情 
单值写法：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 等标签常有默认间距，建议初始化时清零基本上就这些。掌握好 margin 和 padding 的设置方式，配合 box-sizing，能更精准地控制页面布局结构。
以上就是css边距margin与内边距padding设置方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1031180.html
微信扫一扫 
支付宝扫一扫 
