- 用于页面中元素的合理布局
- 所有的元素都可以有宽高
- 所有元素都是一个矩形
- 所有元素都可以看成一个盒子
- 盒子包括 外边距+边框+内边距+元素内容
外边距设置
- 外边距的要素:top、bottom、left、right
- 外边距的尺寸:合法的尺寸单位
- 外边距语法:marign-方向:外边距的尺寸
- 使用百分比作为尺寸单位时,参考的是父级的尺寸
- 可以使用负值,此时元素领地缩小
- 正值时,元素领地扩大
语法:
- marign:上 右 下 左
- marign:上 左右 下
- marign:上下 左右
- marign:上下左右
外边距设置注意事项
- 当两个元素上下排列时,margin-bottom和margin-top的值会合并,并取最大值
- 当两个元素左右排列时,margin-left和margin-right的值不合并
- 行级元素只有左右外边距,没有上下外边距
- img元素是行内块级元素,会有一个下边距,因为其元素的默认属性设置的是基线对齐的方式,可采用下面的命令清除样式
img{vertical-align: top;}
- 块级元素和行内块级元素的外边距四个方向都有效