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è)定所有的邊距? ?
##ding-top ? ?設(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ū)域就是外邊距，外邊距預(yù)設(shè)為透明區(qū)域，外邊距接受任何長(zhǎng)度的單位、百分?jǐn)?shù)。 外邊距常用屬性：
屬性? ? ? ? ? ? ? 說(shuō)明? ?
margin ? ?設(shè)定所有邊距? ?
#?top ?bottom ? ?設(shè)定下邊距? ?
margin-left ? ?設(shè)定左邊距? ?
#margin-left ? ?設(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和#pad#margin和#pad#margin與#margin和#pad#marginding的屬性值》的屬性值#? ? ? ? ①、它們的預(yù)設(shè)值都是0；它們的屬性值都可以為auto——margin作用的元素由瀏覽器計(jì)算外邊距，padding作用的元素由瀏覽器計(jì)算內(nèi)邊距。
? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? b、margin有3個(gè)屬性值(例如margin:10px 5px 15px ;)，其意義為：上外邊距10px、右外邊距和左外邊距5px、其意義為：上外邊距10px、右外邊距和左外邊距5px、下外距##15px15px
##15px； padding有3個(gè)屬性值(例如padding:10px 5px 15px;)，其意義為：上內(nèi)邊距10px、右內(nèi)邊距及左內(nèi)邊距5px、下內(nèi)邊距15px;? ? ? ?：無(wú)論是margin或padding，如果有3個(gè)屬性值，那麼它們的作用方向順時(shí)針??依序?yàn)樯?、右左、下?p>?? ? ? ? ? ? ? ?c、margin有2個(gè)屬性值(例如margin:10px 5px; )，其意義為：上外邊距與下外邊距10px、右外邊距及左外邊距5px；? ? ? ? ? ? ? ? ? ? ??paddingding2個(gè)屬性值(如其意義中：10px)內(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:10px;)，其意義是：4 個(gè)內(nèi)邊距都是10px；
? ? ? ? ? ? ? ? ? ? ? 總結(jié)：無(wú)論是margin或padding，如果有1個(gè)屬性值，那麼它們的邊距值都是相等的；
#
