框模型
盒的content，padding和border區域的背景樣式通過生成元素的’background’屬性來指定。Margin背景總是透明的
存在兼容性問題是： IE 盒子模型的範圍也包括 margin、border、padding、content，和標準 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 padding。
margin
| 說明 | 值 |
|---|---|
| 值 | 長度值或者百分數值或auto |
| 初始值 | 未定義 |
| 應用於 | 所有元素 |
| 繼承性 | 無 |
注意：百分比根據生成盒的包含塊的width來計算。注意，這一點對於’margin-top’和’margin-bottom’也適用。margin屬性允許負值。
合併margin條件：
都屬於流內（in-flow）塊級盒，處於同一個塊格式化上下文 的垂直方向的相鄰margin
（垂直方向相鄰的margin可能發生在父子 或者自己的上下margin）
沒有行盒（line box），沒有空隙，沒有padding並且沒有border把它們隔開
注意 上面的規則表明：
一個浮動的盒與任何其它盒之間的margin不會合並（甚至一個浮動盒與它的流內子級之間也不會）絕對定位的盒的margin不會合並（甚至與它們的流內子級也不會）
內聯盒的margin不會合並（甚至與它們的流內子級也不會）
建立了新的塊格式化上下文的元素（例如，浮動盒與’overflow’不爲’visible’的元素）的margin不會與它們的流內子級合併
等……
當兩個或者更多的margin合併時，產生的margin寬度爲合併margin寬度中的最大值。至於負margin，就從正相鄰margin的最大值中減去負相鄰margin的絕對值的最大值。如果沒有正margin，就用0減去相鄰margin的絕對值的最大值
padding
| 說明 | 值 |
|---|---|
| 值 | 長度值或者百分數值 |
| 初始值 | 未定義 |
| 應用於 | 所有元素 |
| 繼承性 | 無 |
padding的值不能出現負值
如果出現padding爲負值的情況css解析引擎會忽略這行聲明。要記住，在盒模型中只有margin爲負值。
元素的背景色會延伸到padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<style>
div {
width: 100px;
height: 100px;
}
div.box {
padding:100px;
background-color: yellowgreen;
}
div.content {
background-color: white;
}
</style>
</head>
<body>
<div class="box">
<div class="content"></div>
</div>
</body>
</html>
padding不會合並
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<style>
li {
background-color: yellowgreen;
padding: 50px;
margin: 20px 0;
}
li.three,li.four{
margin: 0;
}
</style>
</head>
<body>
<ul>
<li>11111111111111</li>
<li>222222222222222</li>
<li class="three">33333333333333</li>
<li class="four">44444444444444</li>
</ul>
</body>
</html>
padding的值爲百分數
Padding的百分數是相對於包含塊的width的，與height沒有任何關係。
Block元素中的padding：
比如，我要創建一個靈活的正方形，並且這個正方形的邊長都隨着包含塊的width變化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div.box {
width: 300px;
}
div.content {
padding: 50%;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="box">
<div class="content"></div>
</div>
</body>
</html>Inline元素：
在行內元素中同樣相對於包含塊的width來計算，但是可能與塊元素表現不同的是在行內元素中狂傲表現的形式可能有差別。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div.box {
width: 400px;
margin-top: 300px;
}
span {
padding: 50%;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="box">
<span id="span"></span>
</div>
</body>
</html>
Inline中現實的正方式並不是正方式，竟然高比寬要多出16px，原因是有空白字符出現導致了內容區寬高並不是0.解決辦法就是在span樣式中加上font-size: 0;
那麼問題來了，爲什麼在div樣式中出現了一行margin-top: 300px；讀者可以吧這一行去掉，會發現是這樣的。
爲什麼塊元素和行內元素相比差距這麼多呢？難道不是說行內元素只有左右有padding？下面介紹padding與行內元素的時候可能會得到答案。
內邊距和行內元素。
對於行內元素來說，水平方向上，改變padding值會佔據空間，所以會看到不會覆蓋左右的文字。但是垂直方向上來說，改變padding的值不會佔用空間，但是如果加上背景色會“看起來好像是整個高度變大”，但是又因爲覆蓋了前面的文字，所以說，實際真正的高度並沒有發生變化。
所以，總結一句話，對於行內元素左右padding會佔據空間不會覆蓋其他元素，但是上下padding不會佔用空間，表現出來會覆蓋其他元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div.box {
width: 400px;
overflow: visible;
height: 200px;
margin: 300px;
border:1px solid;
line-height: 20px;
}
span {
background-color: yellowgreen;
color: red;
padding-left: 20px;
padding-right: 20px;
padding-top: 50px;
padding-bottom: 100px;
}
</style>
</head>
<body>
<div class="box">
一行文字一行文字一行文字一行文字一行文字一行文字一行文字<span id="span">一行文字</span>
一行文字一行文字一行文字一行文字一行文字一行文字一行文字一行文字一行文字一行文字一行文字一行文字一行文字一行文字一行文字一行文字一行文字一行文字一行文字一行文字一行文字
</div>
</body>
</html>
應用：使得分隔符“|”高度可控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
margin: 300px;
border: 1px solid;
font: 20px "微軟雅黑";
}
span {
margin-left: 20px;
border-left: 2px solid;
padding: 15px 10px 0 10px;
font-size: 0;
}
</style>
</head>
<body>
<div>
註冊<span ></span>登錄
</div>
</body>
</html>
如果使用符號|的話，可能會使用不同的字體表現出來的高度會不一樣，不可控制。所以可以使用一個span使得上下padding和爲|的高。同時由於上下padding不會佔用空間，所以即使上下存在內容也不會打亂排版。