1背景介绍
什么是MARGIN?
在CSS中margin(外边距)是指从自身边框到另一个盒子边框之间的距离,就是外边距。
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参考文献
8更多讨论
问:margin有时候会重叠,是什么原因
答: margin重叠的话只有上下两个垂直的块级元素才会发生重叠
问:如果不想让他们margin重叠有什么办法
答:行内元素不会发生重叠 设置overflow 属于的元素不会重叠 visible值除外 绝对定位 这些都不会重叠
问:一个margin是10px一个是20px;重叠之后的margin是多少;
答:margin重叠的取值是最大一个margin的值