首页 > web前端 > css教程 > 正文

css margin与padding难区分怎么记_通过盒模型结构理解二者作用范围

P粉602998670
发布: 2025-12-22 20:47:14
原创
840人浏览过
padding是内容与边框间的内空隙,属元素自身,影响宽高且可填色;margin是边框与外部元素间的外空隙,不属元素自身,不影响宽高、透明且可负值。

css margin与padding难区分怎么记_通过盒模型结构理解二者作用范围

直接记住一句话:内容 → padding → border → margin,从里到外,顺序不能乱。

padding是“内容和边框之间的空隙”

它在边框里面,属于元素自己的一部分:

  • 文字离边框有多远,靠它控制
  • 设置了背景色或背景图,padding区域也会被填满
  • 在默认盒模型(box-sizing: content-box)下,它会让元素实际更宽更高(比如 width: 100px + padding: 10px → 总宽120px)
  • 不能设负值

margin是“边框和其他元素之间的空隙”

它在边框外面,不属于元素本身,只影响外部关系:

  • 两个div之间要留多大距离,靠它调节
  • 永远透明,不显示背景,也不受边框包围
  • 不影响元素自身的宽高计算(width还是100px,哪怕 margin: 50px)
  • 支持负值(可让元素重叠)
  • 相邻块级元素的上下 margin 会合并(取较大值),这是常见“间距没生效”的原因

用一个真实例子对比看效果

假设有一个带红色边框、黄色背景的 div:

课游记AI
课游记AI

AI原生学习产品

课游记AI 168
查看详情 课游记AI

立即学习前端免费学习笔记(深入)”;

  • padding: 20px → 内容离边框20px,这20px也是黄色的
  • margin: 20px → 整个带边框的盒子,离隔壁元素20px,这段空白是透明的,能看到后面的内容

基本上就这些。不复杂但容易忽略细节。

以上就是css margin与padding难区分怎么记_通过盒模型结构理解二者作用范围的详细内容,更多请关注php中文网其它相关文章!

相关标签:
最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号