padding
padding-top是在绿色边框内,从顶部向下移20像素位置,默认padding-top 为0时,红色边框为20像素高,通过padding-top属性,为顶部增加了20像素,这时顶部为40像素高,最小为0,负数无效,因为他是内边距属性
padding-bottom:20px为底部向下增加20像素,通过调试工具可以看到颜色重合这部分则为增加的内边距,bottom向下增加底部边距上限非常大,3.35544e+7px
padding-left:20px 为从左边开始向右增加20px ,最小为0px,3.35544e+7px为上限
padding-right:20px为从右向左增加20px,最小为0px,3.35544e+7px为上限
1 <div style="background-color: green;height: 100px;"> 2 3 <div style="height: 20px;background-color: red;padding-top: 20px"> 4 5 </div> 6 </div>
1 <div style="height: 20px;background-color: #9B1C2E;padding: 20px">
如果只写padding
则会在红色框,会从上,右,下,左顺序在各边增加20像素
margin
margin-top:为向上及绿色边框上边框开始再向上增加20px像素,当减小到一定像素,这个绿色边框将会消失,最大增加上限3.35544e+7px
1 <div style="height: 20px;background-color: red;margin-top: 20px">
如果为边框增加border:1px 属性,那么改为margin-left,则是在绿色边框内,将红色内边框从左向右缩20像素,最大为绿色边框宽度,
margin-right则将红色内边框从右向左缩20像素
margin-bottom将红色内边框底部向绿色边框底部增加