margin在边框外控制元素间距，可正负值且会合并；padding在边框内增加内容距离，影响元素尺寸且背景延伸，口诀“内填padding，外空margin”。
在CSS中，margin 和 padding 都用于控制元素的间距，但它们作用的位置和效果完全不同。理解它们的%ignore_a_1%对页面布局非常关键。
1. margin：元素外边距
margin 是指元素边框（border）之外的空间，用来控制元素与其他元素之间的距离。
属于元素的外部空间，不会影响内容区域大小 可以设置正值或负值，实现元素间的推开或重叠 相邻的上下 margin 会发生“外边距合并”现象 背景颜色或边框不会延伸到 margin 区域
2. padding：元素内边距
padding 是指元素内容（content）与边框（border）之间的空间，用来控制内容离边框的距离。
属于元素内部空间，会增加元素的实际占用尺寸 只能设置为正值 背景颜色、背景图会延伸到 padding 区域 常用于让文字不紧贴边框，提升可读性和美观性
3. 直观对比示例
假设有一个 div：
博思AIPPT
博思AIPPT来了，海量PPT模板任选，零基础也能快速用AI制作PPT。
117 查看详情 
立即学习“前端免费学习笔记（深入）”；
div { width: 200px; padding: 20px; border: 5px solid #000; margin: 30px;}
内容宽度：200px 总宽度（含内边距和边框）：200 + 20×2 + 5×2 = 250px 该元素在页面中与其他元素的间距是 30px（由 margin 决定）
4. 快速记忆方法
margin → “m” 开头，像“外面”（外边距） padding → “p” 开头，像“填充”（往里填） 口诀：内填 padding，外空 margin
基本上就这些。只要记住：padding 在边框内，影响元素本身大小；margin 在边框外，影响元素之间位置。用多了自然就分清了。
以上就是在css中margin与padding如何区分的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/970691.html
微信扫一扫 
支付宝扫一扫 
