盒子模型的外边距

所属专栏：前端只因变凤凰之路
作者简介：rchjr——五带信管菜只因一枚
前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~
文章简介：本文介绍CSS的盒子模型中的外边距。知识学习内容来自b站的 @黑马程序员 的视频

1外边距

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

包括margin-left、margin-right、margin-top、margin-bottom

复合写法：与padding内边距一致

2外边距应用-块级盒子水平居中对齐

外边距可以让块级盒子水平居中，但必须做到：

1. 盒子指定了宽度

2. 盒子的左右外边距设置为auto

常见写法：margin: 0 auto;

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

    
    
    
    
    



    

        里面的文字
    

3外边距合并

使用margin定义块级元素的垂直外边距时（margin-top和margin-bottom），可能会出现外边距的合并。

两种情况：

1. 相邻块元素垂直外边距的合并

问题描述：当上下两个块级元素相遇，如果上面的块有margin-bottom，下面的块有margin-top，那么两个块之间的垂直距离就是两者的最大值，而不是和。

    
    
    
    
    



    
good
    
bad

解决方案：尽量只给一个盒子添加margin值

2. 嵌套块元素垂直外边距的塌陷

问题描述：对于两个嵌套的父子盒子，父元素与子元素同时有上外边距，这时子元素的上外边距失效（左右外边距如果设置了是有用的），父元素的外边距变成两者中的最大值。

解决方法：

1. 为父元素定义上边框

2. 为父元素定义上内边距

3. 为父元素添加overflow:hidden（常用）

4 清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致，因此在开始布局前，要把所有元素的内外边距去除掉。

方法：用通配符去除掉

    
    
    
    
    



    

        没清除内外边距