padding，margin，盒模型

最新推荐文章于 2024-10-04 11:30:53 发布

wen_special

最新推荐文章于 2024-10-04 11:30:53 发布

阅读量348

点赞数

CC 4.0 BY-SA版权

分类专栏： html css

本文链接：https://blog.youkuaiyun.com/wen_special/article/details/79295611

13 篇文章

订阅专栏

4 篇文章

订阅专栏

本文详细介绍了CSS中的盒模型概念，包括内边距(padding)和外边距(margin)的使用方法，盒模型尺寸计算原理，以及CSS3中新增的box-sizing属性的不同取值对盒模型的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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)