页面元素皆为框（盒子）,定义了元素框处理元素内容，内边距，外边距以及边框的计算方式。
围绕在元素边框外的空白距离（元素与元素之间的距离）
语法：margin，定义4个方向的外边距
（1）取值：以px为单位， %占父级元素宽度的%比
正数：margin-left 元素向右移动，margin-top元素向下移动
负数：就是相反方向
取值 auto：自动计算块级元素的外边距，对于上下外边距无效,块级元素水平居中
margin：value ；定义4个方向的值
margin：v1 v2； v1设置上下，v2设置左右
margin：0 auto：设置块级元素水平居中
margin：v1 v2 v3；v1设置上，v2设置左右，v3设置下
margin：v1 v2 v3 v4；上右下左
h2~h7、p、body、ol、ul、dl、pre
一般在开发的时候需要重置具有外边距的元素
方案一：*{margin:0;padding:0}
方案二：参考淘宝
当两个垂直外边距相遇时，他们将合并成一个，最终的距离取决于两个边距中较大的
行内元素垂直外边距无效（img）除外
同一行中，一个行内块设置了垂直边距，同行其他行内会跟着变化
在特殊条件下，为子元素设置上外边距，会作用到父元素
特殊条件：
1.父元素上边框
2.为第一个子元素设置上外边框，任何一个 都会造成外边框溢出
解决方法：
为父元素添加边框，弊端：影响了父元素的实际高度
为父元素添加内边距，弊端 了父元素的实际高度
在父元素的 第一个子元素位置，添加一个空的table
不会影响其他元素，但是会影响自己的占地尺寸，视觉上感觉大小发生变化
语法：
padding：value ；设置4个方向的内边距
padding：v1 v2；v1设置上下，v2设置左右
padding：v1 v2 v3；v1设置上，v2设置左右，v3设置下
padding：v1 v2 v3 v4；设置上右下左
单方向设置：padding-top/right/bottom/left
box-sizing：content-box；默认值，盒子模型计算，div设置的width，height为content的大小
<style>
#d1{
width: 200px;
height: 200px;
margin: 10px;
padding: 10px;
border: 10px solid black;
box-sizing: content-box;
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）box-sizing：boder-box；div设置的width，height为border外边距的大小
<style>
#d1{
width: 200px;
height: 200px;
margin: 10px;
padding: 10px;
border: 10px solid black;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="d1"></div>
</body>免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
