盒模型（margin padding）

      盒模型：

                        在html中，每一个标签都具有一个盒模型

        盒模型组成部分：

                Content（内容） ，padding（内边距），border（边框），margin（外边 距）

                content:标签元素内容，一般自定义宽和高，或者由子元素的内容撑开宽和高

                padding：设置元素内容到元素边框之间的距离

                border：指的是元素的边框

                margin：设置 当前元素到相邻元素之间的距离

         设置内边距

                    padding-top：num；设置上边距

                    padding-right：num；设置上边距

                    padding-bottom：num；设置上边距

                    padding-left：num；设置上边距

           合写:

                padding: 上 右 下 左；

                左=右 上！=下

                padding：上 右 下；

                左=右 上=下

                padding：上 右；

                左=右 上=下

                padding：上；

        设置外边距

            margin-top 设置元素上边的外边距

            margin- right设置元素右边的外边距

            margin-bottom 设置元素下边的外边距

            margin-left 设置元素左边的外边距

        合写

            margin：上 右 下 左；

            上=下 右！=左

            margin：上 右 下 左；

            上！=下 右=左

            margin：上 右 下 ；

            上=下 右=左

            margin：上 右 ；

            上=下=右=左

            margin：上 ；

    margin 的经典bug

        1.上下两个兄弟元素的margin重叠问题

            上下两个兄弟标签，设置margin的时候，他们之间的距离不是相加，而是谁设置的margin值大，就显示谁的距离，即为值大的覆盖小的

            可以理解为上面元素的margin-bottom和下面元素的margin-top他们的值取最大的一个

            解决办法：给下面的元素添加display: inline-block;

        2.父子级子元素的margin-top传递问题

            在子元素中设置margin-top，表现的结果是该margin-top传递到了父级元素上，是的父元素距离他上面的元素为该margin-top值

            解决方法：

                a.给父元素添加 overflow：hidden；

                b.给父元素添加 border