当前位置: 首页 > news >正文

【margin与padding的区别与用法】

margin与padding的区别:

1.margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。

2.padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。

想象你站在只有一个房间的屋子,你与房间墙壁之间的距离叫Padding ,房子与你隔壁邻居的房子间的距离可以理解为margin。

margin与padding的用法:

margin:(写法) margin-left:10px; 左外边距

                      margin-right:10px; 右外边距

                      margin-top:10px; 上外边距

                      margin-bottom:10px; 下外边距

                      margin:10px; 四边统一外边距

                      margin:10px 20px; 上下、左右外边距

                      margin:10px 20px 30px; 上、左右、下外边距

                      margin:10px 20px 30px 40px; 上、右、下、左外边距

padding:(写法)padding-left:10px; 左内边距

                          padding-right:10px; 右内边距

                          padding-top:10px; 上内边距

                          padding-bottom:10px; 下内边距

                          padding:10px; 四边统一内边距

                          padding:10px 20px; 上下、左右内边距

                          padding:10px 20px 30px; 上、左右、下内边距

                          padding:10px 20px 30px 40px; 上、右、下、左内边距

使用会出现的bug:

1.浏览器在默认状态下会对margin设置初值,所以在没有对div设置margin的情况下,div会出现一定的间隔;

2.相邻的 margin 存在重叠问题,如果能用 padding 实现,那重叠通常会是未预期的副作用;

3.padding中不能出现负值。

4.给子级写margin-top:20px;时就会出现子级与父级同时出现了top50的结果,解决方法就是给它的父级写一个overflow:hidden;就好了。

5.给子级写padding-top:20px;是就会出现子级的高度多了20px,而不是下移了20px,解决方式就是给它的父级写一个盒子 box-sizing:border-box;

转载于:https://www.cnblogs.com/FFPING/p/8186367.html

相关文章:

  • MyBatis JdbcType 与Oracle、MySql数据类型对应关系详解
  • 十三、视图
  • POJ3415 Common Substrings
  • Mysql-where子句与having子句的区别
  • 2017总结及2018计划
  • 使用tree生成目录结构
  • BGP 路由属性 公认必遵 AS_PATH
  • Spark之从hdfs读取数据
  • Python3之uuid模块
  • Jquery学习笔记 - DOM操作
  • 【Java线程安全】 — ThreadLocal
  • python模块之collections模块
  • ElasticSearch集群介绍二
  • jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法
  • 06人月神话阅读笔记
  • 【翻译】babel对TC39装饰器草案的实现
  • 30天自制操作系统-2
  • centos安装java运行环境jdk+tomcat
  • Flannel解读
  • IndexedDB
  • Javascript Math对象和Date对象常用方法详解
  • JavaScript设计模式之工厂模式
  • KMP算法及优化
  • npx命令介绍
  • PHP CLI应用的调试原理
  • 表单中readonly的input等标签,禁止光标进入(focus)的几种方式
  • 前端性能优化--懒加载和预加载
  • 最简单的无缝轮播
  • postgresql行列转换函数
  • 进程与线程(三)——进程/线程间通信
  • ​sqlite3 --- SQLite 数据库 DB-API 2.0 接口模块​
  • ​VRRP 虚拟路由冗余协议(华为)
  • #Spring-boot高级
  • #鸿蒙生态创新中心#揭幕仪式在深圳湾科技生态园举行
  • $NOIp2018$劝退记
  • (C#)一个最简单的链表类
  • (LeetCode C++)盛最多水的容器
  • (附源码)计算机毕业设计ssm电影分享网站
  • (接口封装)
  • (力扣记录)1448. 统计二叉树中好节点的数目
  • (论文阅读11/100)Fast R-CNN
  • (三维重建学习)已有位姿放入colmap和3D Gaussian Splatting训练
  • (五)MySQL的备份及恢复
  • (一)eclipse Dynamic web project 工程目录以及文件路径问题
  • (一)u-boot-nand.bin的下载
  • .apk 成为历史!
  • .jks文件(JAVA KeyStore)
  • .NET “底层”异步编程模式——异步编程模型(Asynchronous Programming Model,APM)...
  • .net core开源商城系统源码,支持可视化布局小程序
  • .stream().map与.stream().flatMap的使用
  • /ThinkPHP/Library/Think/Storage/Driver/File.class.php  LINE: 48
  • ::
  • @cacheable 是否缓存成功_Spring Cache缓存注解
  • @Resource和@Autowired的区别
  • @Service注解让spring找到你的Service bean