什么时候用MARGIN,什么时候用PADDING

1背景介绍

什么是MARGIN?

在CSS中margin(外边距)是指从自身边框到另一个盒子边框之间的距离,就是外边距。

什么是PADDING?

Padding(内边距)是指自身的边框与自身的内容之间的空间,就是内边距。


2知识剖析

Margin的特性

margin 没有背景颜色,是完全透明的。

margin 可以单独改变元素的上,下,左,右边距,也可以一次改变所有的属性。

margin 属性接受任何长度单位,可以是像素、英寸、毫米、em 、负值、auto、百分数值(百分数是相对于父元素的width计算的,如果父元素的 width 改变,它也会改变)

padding的特性

padding 属性可以改变上下左右的填充

padding 属性接受长度值或百分比值,但不允许使用负值。(百分数值是相对于其父元素的 width 计算的,如果父元素的 width 改变,它也会改变)


3常见问题

什么时候用margin?什么时候用padding?


4解决方案

什么时候用margin?

需要在border外侧添加空白时

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

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


什么时候用padding?

需要在border内测添加空白时

空白处需要背景(色)时。

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


5编码实战


6拓展思考

margin重叠


7参考文献

什么时候用margin,什么时候用padding

margin和padding用法区别介绍

外边距(margin)重叠及防止方法


8更多讨论

问:margin有时候会重叠,是什么原因

答: margin重叠的话只有上下两个垂直的块级元素才会发生重叠 

问:如果不想让他们margin重叠有什么办法

答:行内元素不会发生重叠      设置overflow 属于的元素不会重叠 visible值除外   绝对定位  这些都不会重叠

问:一个margin是10px一个是20px;重叠之后的margin是多少;

答:margin重叠的取值是最大一个margin的值

猜你喜欢

转载自blog.csdn.net/weixin_42041193/article/details/80792919