专栏首页Chasays微信小程序-margin和padding的区别

微信小程序-margin和padding的区别

为了方便,先看一个图,外面的是margin,是外边距,padding是内边距。

margin

这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。 块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并。允许指定负的外边距值,不过使用时要小心。

margin:10px 5px 15px 20px;
上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px

可以使用负值。

padding

这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算;因此,如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。 实例:

padding:10px 5px 15px 20px;
上内边距是 10px
右内边距是 5px
下内边距是 15px
左内边距是 20px

不允许使用负值

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序-元素的定位相对绝对固定

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    叉叉敌
  • Objective-C 学习记录6--dictionary

    NSDictionary dictionaryWithObjectsAndKeys:~,nil

    叉叉敌
  • fatal: Cannot get https://gerrit.googlesource.com/git-repo/clone.bundle解决版本

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    叉叉敌
  • 3D怎么写才能显示出效果呢。

    用户7873631
  • 电商静态网页建设初探1.登录页面2.注册页面

    Python攻城狮
  • golang学习之beego框架配合easyui实现增删改查及图片上传

    demo目录: ? upload文件夹主要放置上传的头像文件,main是主文件,所有效果如下: 主页面: ? 具体代码: <!DOCTYPE html> <ht...

    用户1141560
  • Css3新特性应用之视觉效果

    一、单侧阴影 box-shadow属性的应用,格式:h-shadow v-shadow blur spread color inset属性取值介绍 h-sah...

    sam dragon
  • 【博客美化】01.推荐和反对炫酷样式

    悟空聊架构
  • 高质量编码-轨迹管理平台(CSS样式)

    样式仿照百度地图鹰眼轨迹服务早期版本的web端轨迹管理台,地图和UI都使用了夜色风格。

    MiaoGIS
  • CSS3 box-shadow实现背景动画

    box-shadow,向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略...

    Javanx

扫码关注云+社区

领取腾讯云代金券