外边距
在 CSS 中，外边距（margin）用于控制元素与其他元素之间的间距。
笔记内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距</title>
<style>
.content{
/* 盒子模型外边距 */
margin-top:1px;
margin-right:1px; /* auto：右边自动充满（盒子最终显示在左边） */
margin-bottom:1px;
margin-left:1px; /* auto：左边自动充满（盒子最终显示在右边） */
margin:1px; /* 四边都是 1px */
margin:1px 2px; /* 上下 1px，左右 2px */
margin:1px 2px 3px; /* 上 1px，左右 2px，下 3px */
margin:1px 2px 3px 4px; /* 依次是：上右下左 */
margin:0 auto; /* 上下 0，左右自动，最终的效果就是盒子居中显示，前提必须是块元素，且元素必须有宽度，没有设置宽度不生效 */
margin: 100px auto; /* 上下100，左右自动 */
margin: auto; /* 与 margin:0 auto 一样效果（加了定位或浮动的盒子，margn:auto 就失效了，必须采用别的方法才能让盒子居中对齐）*/
/* 外边距合并：即相邻盒子的垂直外边距会合并，水平外边距不会合并。（这种情况无需解决，设置合适的垂直外边距即可）*/
/*
外边距塌陷：即嵌套的两个盒子，给子盒子设置垂直外边距，并不会使子盒子跟父盒子之间产生垂直外边距，而是在父盒子外产生了垂直外边距，水平外边距不会塌陷。（这种情况需要解决）
解决方式：
1、给父盒子设置边框 border。（四边任意一边都行，或者四边全部设置）
2、给父盒子设置 padding，使用 padding 与子盒子隔开。（任意 pandding 的值都行，比如 padding-top:1px 就可以，这时候对子盒子设置的 margin-top 就可以生效了）
3、上面两种都会对父盒子的大小产生影响，还可以用第三种方法，给父盒子添加：overflow:hidden
*/
}
</style>
</head>
<body>
<div class="content">
</div>
</body>
</html>
