内外边距、浮动、布局相关

关于清除元素的内外边距：

1、行内元素只有左右边距、没有内外边距、内边距在ie6等低版本的浏览器中也会有问题。尽量不要给元素指定行内的内外边距；

2、外边距的合并

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

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

当相邻两个块元素相遇时，如果上面的元素有下边距margin-bottom，下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象称之为相邻元素垂直外边距的合并，又称之为外边距的塌陷。

嵌套块元素垂直外边距的合并：

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

解决方案

可以为父元素定义1px的上边框和上内边距

可以为父元素添加overflow：hidden；

关于padding不会撑开盒子的情况

注意tips：

1、宽度属性width和高度属性height仅仅适用于块级元素，对行内元素无效（img标签和input例外）；

一点妙用【如果已经给行内元素添加了浮动，此时不需要转换这个元素也可以有宽高！】

2、计算盒子模型的总高度时还应该考虑上下两个盒子垂直外边距合并的情况；

3、如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding不会影响本盒子的大小；

设定两个盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>padding盒子不会撑开的情况</title>
</head>
    <style>
        .father {
            height: 200px;
            background-color: pink;
            width: 200px;/* 因为父盒子有宽度给定值了，所以盒子被撑开； */
        }
        .son {
            padding-left: 30px;/* 儿子没有给宽度，用的是默认，所以不会被撑开； */
        }
        }
    </style>
<body>
    <div class="father">
        <div class="son">
        123
    </div>
</div>
</body>
</html>