页面布局之盒子模型——padding与margin(内边距和外边距)（margin外边距叠加）

padding 内边距

padding会撑开盒子

padding实际上是内容与边框的距离。设置padding，即设置了内容与边框的距离，则本质上是“撑开”了盒子。故盒子会变大！

仅设置content和border的块状元素div
设置content内容区的宽度高度，并且设置了margin-top,margin-left，以及设置了1px的红色实线边框。

div{
    width: 100px;
    height: 110px;
    margin-top: 30px;
    margin-left: 30px;
    border:1px solid red;
}

如图：

若设置了padding，会撑大盒子！

div{
    width: 100px;
    height: 110px;
    padding: 30px;
    margin-top: 30px;
    margin-left: 30px;
    border:1px solid red;
}

蓝色部分是content，绿色部分是向外额外撑开的padding，绿色与橙色交界是原本的border。
如果给盒子设置了宽度和高度（针对content），再设置padding，则会撑开盒子。

不让padding撑开盒子

如何既能让content与border保持距离，但又不额外撑开盒子，使得盒子变大而影响布局呢。

用height和width减去设置的padding值即可解决问题。

padding属性的设置

可分别单独设置四个方向的padding

div{
    width: 100px;
    height: 110px;
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
    margin-top: 30px;
    margin-left: 30px;
    border:1px solid red;
}

分别设置了padding-top,padding-left,padding-bottom,padding-right。
也可一起设置padding，上面代码等价于：

div{
    width: 100px;
    height: 110px;
    padding:10px;
    margin-top: 30px;
    margin-left: 30px;
    border:1px solid red;
}

padding：10px表示上右下左都有10px的内边距。
另外几种设置方式

1. padding:5px 10px; 上下为5px,左右为10px
2. padding:5px 10px 15px;上为5px，左右为10px，下为15px；
3. padding:5px 10px 15px 20px;上右下左分别为5px，10px，15px，20px （顺时针）

padding属性的应用——导航栏

先上代码

    <a href="#">首页</a>
    <a href="#">朋友圈</a>
    <a href="#">QQ空间</a>
    <a href="#">呵呵呵呵呵呵</a>

body{
    font-size: 0;
}

a{
    display:inline-block;
    height: 30px;
    padding: 0 20px;
    line-height: 30px;
    font-size: 15px;
    text-decoration: none;
    background-color: pink;
}

text-decoration:none 是为了去掉 a 标签的下划线。
line-height:30px；与height相等，是为了使文本垂直居中
既然要设置height，而a是行内元素，无法设置高度，故要对元素进行模式转换！
转化成block元素则没法横向排列，故转化为inline-block。
转化成inline-block，又会出现间隙，故要父元素font-size:0，子元素a标签另外设置font-size
每个导航栏的字数不一样多，3个，4个，5个，6个，若给定宽度会很不方便
所以只设置padding，根据content的宽度再去撑开盒子即可

如图我给定了宽度width:100px;

非常丑

margin 外边距

margin的叠加

margin外边距叠加，分以下三种

1. 同级元素外边距叠加
2. 父子元素外边距叠加
3. 空元素外边距叠加

margin外边距叠加的规则如下：

1. 水平margin，即margin-left,margin-right永远不会发生叠加
2. 只有margin-top,margin-bottom会在这三种情况下发生叠加
3. 外边距叠加之后，外边距高度等于两个外边距最大的那个值
4. 外边距叠加，与inline元素无关，因为行内元素的margin-top,margin-bottom无意

同级元素外边距叠加的实例：

    <div class="box1">aaaa</div>
    <div class="box2">bbbb</div>

首先，设置两个块级元素盒子。

.box1{
    width: 100px;
    height: 100px;
    /* margin-bottom: 30px; */
    background-color: pink;
}
.box2{
    width: 100px;
    height: 100px;
    /* margin-top: 20px; */
    background-color: skyblue;
}

再者，设置CSS样式，设定width,height,background-color，先不设置margin。

看看效果：

设置margin值，粉色为30px.蓝色为20px，如下：

.box1{
    width: 100px;
    height: 100px;
    margin-bottom: 30px;
    background-color: pink;
}
.box2{
    width: 100px;
    height: 100px;
    margin-top: 20px;
    background-color: skyblue;
}

橙色那块是粉色盒子的margin-bottom:30px；“吃掉”了蓝色的margin-top。

同样父子元素外边距叠加，也遵循以上规则。

如何解决？

1. 为父元素定义上边框 border-top
2. 为父元素定义上内边距 padding-top
3. 为父元素添加overflow:hidden

关于margin，除了外边距叠加的知识，还有水平居中和负margin技巧

可另外看以下链接