margin属性和padding属性的区别?

margin和padding属性中四个值的先后顺序及区别,Margin还有一个快捷的书写方法,就是直接用margin属性,margin属性后面可以有四个值,中间用空格隔开(记住不是逗号),顺序是“上右下左”,当然margin后面可以不足四个值.

下面给大家讲解的是css代码中margin属性和padding属性的区别,下面来详细给大家讲解下。

margin和padding属性

css代码中Margin和padding属性的区别:

margin:指的是边框以外的留白;
padding:指的是边框与图文内容之间的留白;
总结,margin属性设置的是外边距,padding属性设置的为内边距。

1、Margin属性

Margin属性包括有margin-top、margin-right、margin-bottom、margin-left,这个属性主要控制的是边框之外的的留白,如果Margin属性上右下左margin值均为40px,可将代码设置为:
margin-top: 40px;
margin-right: 40px;
margin-bottom: 40px;
margin-left: 40px;
根据上, 右, 下, 左的顺时针规则, Margin属性可简写为margin: 40px 40px 40px 40px;
如果上下,左右的margin属性值是一样的,那到就可以将margin属性的CSS代码写成margin: 40px 40px;,第一个40px代表的是上下的margin属性值,后一个40px代表的是左右的margin属性值;
当上下左右的margin属性值都相同,那么margin属性值可以简写为margin: 40px;

2、Padding属性

Padding属性包括有padding-top、padding-right、padding-bottom、padding-left,这个元素主要控制的是边框与图文内容之间的留白,Padding属性值可参考以下的写法。
例1:padding:10px 5px 15px 20px;
上内边距是 10px;
右内边距是 5px;
下内边距是 15px;
左内边距是 20px。
例2:padding:10px 5px 15px;
上内边距是 10px;
右内边距和左内边距是 5px;
下内边距是 15px。
例3:padding:10px 5px;
上内边距和下内边距是 10px;
右内边距和左内边距是 5px。
例4:padding:10px;
所有4个内边距都是 10px。

本篇文章发布于大兵SEO博客,为大兵原创内容,如若转载,请注明出处:https://www.zhuzhouren.cn/seojishu/2611.html,否则,禁止转载,谢谢配合!

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2020-11-28 16:00
下一篇 2020-12-01 17:10

发表回复

登录后才能评论
联系我

平时工作忙:合作还是咨询SEO服务,请简明扼表明来意!谢谢!

在线咨询:点击这里给我发消息

邮件:dabingseo@qq.com
工作时间:周一至周六,10:30-24:30,节假日休息

个人微信
个人微信
分享本页
返回顶部