CSS 外邊距和內(nèi)邊距
前面我們學(xué)習(xí)了這個(gè)圖片：box盒子。
盒模型主要定義四個(gè)區(qū)域：內(nèi)容(content)、內(nèi)邊距(padding)、邊框(border)和外邊距(margin)。
CSS 內(nèi)邊距 padding
內(nèi)邊距是在內(nèi)容外、邊框內(nèi)，內(nèi)邊距的屬性有5個(gè)，其中padding是設(shè)置所有的邊距，其他4個(gè)則分別設(shè)置上下左右的邊距。
屬性 描述
padding 設(shè)置所有的邊距
padding-top 設(shè)置上邊距
padding-bottom 設(shè)置下邊距
padding-left 設(shè)置左邊距
padding-right 設(shè)置右邊距
<!DOCTYPE html>
<html>
<head>
<title>測(cè)試內(nèi)邊距</title>
<meta charset="utf-8">
<!-- 調(diào)用CSS樣式表 -->
<style type="text/css">
#all{padding: 100px;}/*設(shè)置所有內(nèi)邊距*/
#top{padding-top: 100px;}/*設(shè)置上面的內(nèi)邊距*/
#bottom{padding-bottom: 100px;}/*設(shè)置下面的內(nèi)邊距*/
#left{padding-left: 100px;}/*設(shè)置左邊的內(nèi)邊距*/
#right{padding-right: 100px;}/*設(shè)置右邊的內(nèi)邊距*/
</style>
</head>
<body>
<table border="1">
<tr>
<td id="top">我是padding-top，我設(shè)置了上邊距</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td id="bottom">我是padding-bottom，我設(shè)置了下邊距</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td id="left">我是padding-left，我設(shè)置了左邊距</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td id="right">我是padding-right，我設(shè)置了右邊距</td>
</tr>
</table>
<table border="1">
<tr>
<td id="all">我是padding，我設(shè)置了所有內(nèi)邊距</td>
</tr>
</table>
</body>
</html>CSS 外邊距 margin
圍繞在內(nèi)容邊框的區(qū)域就是外邊距，外邊距默認(rèn)為透明區(qū)域，外邊距接受任何長(zhǎng)度的單位、百分?jǐn)?shù)。
外邊距常用屬性：
屬性 描述
margin 設(shè)置所有邊距
margin-top 設(shè)置上邊距
margin-bottom 設(shè)置下邊距
margin-left 設(shè)置左邊距
margin-right 設(shè)置右邊距
<!DOCTYPE html>
<html>
<head>
<title>測(cè)試外邊距</title>
<meta charset="utf-8">
<!-- 調(diào)用CSS樣式表 -->
<style type="text/css">
#ss {
background-color: #333;
color: #FFF;
margin-top: 10px;
margin-bottom: 10px;
}
#rr {
font: normal 14px/1.5 Verdana, sans-serif;
margin-top: 30px;
margin-bottom: 30px;
border: 1px solid #F00;
}
</style>
</head>
<body>
<p id = "ss">盒子模型主要是有margin(外邊距)、border(邊框)、padding(內(nèi)邊距)、content(內(nèi)容)組成</P>
<p id = "rr">盒子模型主要是有margin(外邊距)、border(邊框)、padding(內(nèi)邊距)、content(內(nèi)容)組成</P>
</body>
</html>margin和padding的屬性值
①、它們的默認(rèn)值都是0；它們的屬性值都可以為auto——margin作用的元素由瀏覽器計(jì)算外邊距，padding作用的元素由瀏覽器計(jì)算內(nèi)邊距。
②、margin允許指定負(fù)的外邊距值，不過(guò)使用時(shí)要小心；padding不允許指定負(fù)邊距值；
③、margin和padding的屬性值都可以有1個(gè)、2個(gè)、3個(gè)和4個(gè)：
a、margin有4個(gè)屬性值(例如margin:10px 5px 15px 20px;)， 其含義是：上外邊距10px、右外邊距5px、下外邊距15px、左外邊距20px；
padding有4個(gè)屬性值(例如padding:10px 5px 15px 20px;)，其含義是：上內(nèi)邊距10px、右內(nèi)邊距5px、下內(nèi)邊距15px、左內(nèi)邊距20px；
總結(jié)：無(wú)論是margin還是padding，如果有4個(gè)屬性值，那么它們的作用方向順時(shí)針 依次為上、右、下、左；
b、margin有3個(gè)屬性值(例如margin:10px 5px 15px ;)， 其含義是：上外邊距10px、右外邊距和左外邊距5px、下外邊距15px；
padding有3個(gè)屬性值(例如padding:10px 5px 15px;)，其含義是：上內(nèi)邊距10px、右內(nèi)邊距和左內(nèi)邊距5px、下內(nèi)邊距15px；
總結(jié)：無(wú)論是margin還是padding，如果有3個(gè)屬性值，那么它們的作用方向順時(shí)針 依次為上、右左、下；
c、margin有2個(gè)屬性值(例如margin:10px 5px;)， 其含義是：上外邊距和下外邊距10px、右外邊距和左外邊距5px；
padding有2個(gè)屬性值(例如padding:10px 5px;)，其含義是：上內(nèi)邊距和下內(nèi)邊距10px、右內(nèi)邊距和左內(nèi)邊距5px；
總結(jié)：無(wú)論是margin還是padding，如果有2個(gè)屬性值，那么它們的作用方向順時(shí)針 依次為上下、右左；
d、margin有1個(gè)屬性值(例如margin:10px;)， 其含義是：4 個(gè)外邊距都是 10px；
padding有1個(gè)屬性值(例如padding:10px;)，其含義是：4 個(gè)內(nèi)邊距都是 10px；
總結(jié)：無(wú)論是margin還是padding，如果有1個(gè)屬性值，那么它們的邊距值都是相等的；
