padding，margin，盒模型

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wen_special/article/details/79295611

• padding：内边距。内部填充。设置padding之后会撑开容器的大小。可以设置4个方向的：top，right，bottom，left。

  1. 若padding:20px ，则在容器的4个方向的padding都为20px;
  2. 若padding：20px 30px， 则在容器的上下方向的padding值为20px，左右方向的padding值为30px;
  3. 若padding：10px 20px 30px，则在容器的上边的padding为10px，左右方向为20px，下边为30px;
  4. 若padding：10px 20px 30px 40px，则在容器的上方向10px，右方向20px，下方向30px，左方向40px;

• margin:外边距。标签与标签之间的间隔(距离)

  1. margin可以设置4个方向值：top，right，bottom，left。具体和padding一样

  2. margin可能会引起的问题：
     1.margin-top的传递问题：
     两张图说明问题：
     代码：
     
     效果图：
     

     在父子级包含的时候，子级的margin-top会传递给父级。解决方法：给父级元素加上border

     2.margin会上下外边距叠压.(margin叠压时会取最大值)
     关于叠压，上面那个例子应该也可以说明问题，所以可以通过这只某一个方向的margin的值是需要的最大值即可。

• 盒模型
  若代码段：

  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，几种盒模型计算元素宽高的区别如下：

1. content-box（默认）
   布局所占宽度Width：Width = width + padding-left + padding-right + border-left + border-right
   布局所占高度Height:Height = height + padding-top + padding-bottom + border-top + border-bottom
2. padding-box
   布局所占宽度Width：Width = width(包含padding-left + padding-right) + border-top + border-bottom
   布局所占高度Height:Height = height(包含padding-top + padding-bottom) + border-top + border-bottom
3. border-box
   布局所占宽度Width：Width = width(包含padding-left + padding-right + border-left + border-right)
   布局所占高度Height:Height = height(包含padding-top + padding-bottom + border-top + border-bottom)