CSS入门基础知识（十一）——CSS盒子模型（二）

CSS标签入门基础知识

CSS盒子模型

内边距

内边距（padding）属性用于设置内边距，即边距和内容之间的距离。

内边距的复合写法：

padding简写属性属性可以有一到四个值。

注意：
内边距一样会影响盒子的实际大小，为保证盒子和效果图保持一致，让高和宽减去多出来的内边距大小即可。

如果盒子没有指定盒子宽度高度属性，padding不会撑开盒子的大小。

外边距

margin属性用于设置外边距，即控制盒子和盒子之间的距离。

margin简写方式和padding一样。

外边距典型应用：

外边距可以让块级盒子水平居中，但必须满足条件：
1、盒子必须指定了宽度
2、盒子左右的外边距都设置为auto

常见的写法：

例子：

注意:以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center即可。

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

嵌套快元素垂直外边距的塌陷
对于俩个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案：
1、可以为父元素定义上边框
2、可以为父元素定义上内边框
3、可以为父元素添加overflow:hidden
此外，浮动、固定、绝对定位的盒子不会有塌陷问题。

清除内外边距

网页元素很多都待遇默认的内外边距，而且不同的浏览器默认的也不一致。因此在布局之前，首先要先清楚下网页元素的内外边距。

注意：
行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。

（ps：引自pink老师~，刚刚开始作为自己的学习笔记写，如有不好请见谅，阿里嘎多）

参考学习链接。[^1]

[^1]：https://www.bilibili.com/video/BV14J4114768?p=1