版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wen_special/article/details/79295611
padding:内边距。内部填充。设置padding之后会撑开容器的大小。可以设置4个方向的:
top,right,bottom,left
。- 若
padding:20px
,则在容器的4个方向的padding都为20px; - 若
padding:20px 30px
, 则在容器的上下方向的padding值为20px,左右方向的padding值为30px; - 若
padding:10px 20px 30px
,则在容器的上边的padding为10px,左右方向为20px,下边为30px; - 若
padding:10px 20px 30px 40px
,则在容器的上方向10px,右方向20px,下方向30px,左方向40px;
- 若
margin:外边距。标签与标签之间的间隔(距离)
- margin可以设置4个方向值:
top,right,bottom,left
。具体和padding一样 margin可能会引起的问题:
1.margin-top的传递问题:
两张图说明问题:
代码:
效果图:
在父子级包含的时候,子级的margin-top会传递给父级。解决方法:给父级元素加上border
2.margin会上下外边距叠压.(margin叠压时会取最大值)
关于叠压,上面那个例子应该也可以说明问题,所以可以通过这只某一个方向的margin的值是需要的最大值即可。
- margin可以设置4个方向值:
盒模型
若代码段:div{ width:100px; height:100px; border:10px solid black; margin:20px; padding:20px; }
则盒模型大小:
border+padding+width+height
所以 宽:100+10×2+20×2 = 160,高: 100+10×2+20×2 = 160
CSS3中新增了一种盒模型计算方式:box-sizing熟悉。盒模型默认的值是content-box, 新增的值是padding-box和border-box,几种盒模型计算元素宽高的区别如下:
- content-box(默认)
布局所占宽度Width:Width = width + padding-left + padding-right + border-left + border-right
布局所占高度Height:Height = height + padding-top + padding-bottom + border-top + border-bottom
- padding-box
布局所占宽度Width:Width = width(包含padding-left + padding-right) + border-top + border-bottom
布局所占高度Height:Height = height(包含padding-top + padding-bottom) + border-top + border-bottom
- border-box
布局所占宽度Width:Width = width(包含padding-left + padding-right + border-left + border-right)
布局所占高度Height:Height = height(包含padding-top + padding-bottom + border-top + border-bottom)