頁面元素皆為框（盒子）,定義了元素框處理元素內容，內邊距，外邊距以及邊框的計算方式。
圍繞在元素邊框外的空白距離（元素與元素之間的距離）
語法：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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
