Css中margin和padding的区别及详解之我见

文章2017-01-112,770 人已阅来源:TONJAY-原创

很多刚入行的朋友对Css中的margin和padding属性理解不是很清楚,说来我也入行多年,但也不是很精通。不过还是有些心得,想写出来,期望能帮到一两位朋友。

先说说对margin和padding属性的基础含义。先看下图:

A-box与B-box的大小都是166*166正方形,B-box有个20px的padding值(用深灰色加以区别,padding的背景是继承自身元素的背景的),在默认值下他们的css应该是这样的:

.A-box{ width:166px; height:166px; background:#d1d1d1; margin-right:150px;}

.B-box{ width:126px; height:126px; padding:20px;}

那么,A-box与B-box的间距是150px,即margin-right值为150。当然,如果给B-box添加margin-left:150px 也可以达到同样的效果。margin值是透明的不可见的一个属性,通常称之为外填充或者外间距。

虽然A-box与B-box一样的大小,但是width与height值却不相同。这是因为B-box的padding值为20px,即在B-box原有的widht值和height值上,再各加40px,这样就与A-box一样大小了。但是,默认情况下,padding值区域是不可使用的,也就是说B-box的内容可用区域只有126px*126px大小,但可以为该区域设置背景。padding通常称之为内填充或者内间距。

下面再说一下margin与padding的几个需要注意的地方:

  1. 根据上面的例子:如果给A-box添加margin-right:150px,再给B-box添加margin-left:150px,那么他们的外间距是多少?记住,不是300px,是狭路相逢勇者胜,谁的值大就取谁,谁的值小谁就被干掉了。
  2. margin值与padding值都可以缩写,以margin为例:可对四个方向单独设置:margin-top/right/bottom/left:20px。
    • 如果这样写:margin:20px,意为同时对四个方向设置外间距。
    • 如果这样写:margin:20px 30px,意为上下外间距为20px,左右外间距为30px。
    • 如果这样写:margin:20px 30px 40px,意为上外间距为20px、左右外间距为30px、下外间距为40px。
    • 如果这样写:margin:20px 30px 40px 50px,这四个值对应的方向是:上→右→下→左。
  3. 如果父级元素没有设置 border / padding / overflow:hidden等属性,第一个子元素的margin值会影响父元素的定位。通常的解决方案可以根据实际情况,对父级元素设置border / padding / overflow:hidden属性;也可以对子元素设置浮动float/绝对定位absolute;又或者把子元素的margin值改换用padding值。
  4. 根据上面的例子:有人会觉得我需要的是一样的大小,但B-box值又是padding值又是加又是减的太麻烦,能不能让padding值不影响元素自身的width和height值?可以,对该元素设置(css3)box-sizing: border-box即可。具体大家可以了解一下box-sizing属性。
  5. 具体什么时候该用margin什么时候该用padding呢?个人意见是:如果你需要的是距离(意思是不想与你有任何交集时),可以用margin;如果你只是想内容与边缘有些间隙等,可以用padding。其实略微思考下,从他们的字面意思内/外间距也可以看出他们的区别,再根据实际需要进行有选择性的使用。

此文为Tonjay原创,转载保留相关信息。