首页/SEO技术/正文
margin属性和padding属性的区别?

 2022年03月18日  阅读 326  评论 0

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

下面给大家讲解的是css代码中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。

版权声明:本文为 “黑帽百科” 原创文章,转载请附上原文出处链接及本声明;

原文链接:http://www.heimao.wiki/post/56658.html

标签:

发表评论:

关于我们
黑帽百科:黑帽seo百科,黑帽seo技术学习培训分享,黑帽SEO快排程序分享,定制。 SEO快速排名收录学习 老师qq:25496334
扫码关注
联系方式
全国服务热线:
地址:新加坡 - 市中心(Singapore City)乌节路
Email:hack66666@foxamil.com
邮编:
Copyright Your 黑帽百科.|网站地图.Some Rights Reserved.