margin和padding的区别是什么?

margin和padding的用法:

(1)padding (margin) -left:10px;          左内 (外) 边距

(2)padding (margin) -right:10px;         右内 (外) 边距

(3)padding (margin) -top:10px;         上内 (外) 边距

(4)padding (margin) -bottom:10px;        下内 (外) 边距

(5)padding (margin) :10px;           四边统一内 (外) 边距

(6)padding (margin) :10px 20px;         上下、左右内 (外) 边距

(7)padding (margin) :10px 20px 30px;      上、左右、下内 (外) 边距

(8)padding (margin) :10px 20px 30px 40px;    上、右、下、左内 (外) 边距

1.png

margin的用法说明:

(1)需要在border外侧添加空白时,

(2)空白处不需要有背景(色)时,

(3)上下相连的两个盒子之间的空白需要相互抵消时,比如15px+20px的margin,将得到20px的空白。

padding的用法说明:

(1)需要在border内侧添加空白时(往往是文字与边框距离的设置),

(2)空白处需要背景(色)时,

(3)上下相连的两个盒子之间的空白希望等于两者之和时,比如15px+20px的padding,将得到35px的空白。

margin和padding的区别:

margin是外边距,即盒子与盒子之间的距离,而padding是内边距,是盒子的边与盒子内部元素的距离。(margin是用来隔开元素与元素的间距;padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干;padding用于元素与内容之间的间隔,让内容(文字)与(包裹)元素之间有一段“呼吸距离”。)

maegin的bug处理方式:

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

2、margin-top会经常出现bug,所以推荐只在兄弟元素之间使用margin,而在父子元素之间使用padding;

3、竖直方向上会出现margin值叠加情况,此时margin的取值方式是取上下两个元素之间较大的margin值;

4、IE6在满足以下四个条件的情况下会触发横向的双倍边距:(1)元素是浮动的(2)元素必须要有横向的margin(3)元素必须是块元素|(4)浏览器是ie6

6、当两个盒子为兄弟关系时,相邻的地方同时使用了外边距,只取较大的那个外边距值。

padding的bug处理方式:

1、当两个盒子套一起时,给蓝色盒子写padding-top:50px;时,两个盒子之间变不会产生上距离.而是给蓝色盒子的高添加了50像素.(见,图2)这时,就需要给红色添加一个盒子。box-sizing:border-box

2.png

3.png

2、padding不能给负值。

更多web开发知识,请查阅 HTML中文网 !!

以上就是margin和padding的区别是什么?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏