CSS基礎(chǔ)教程之內(nèi)邊距和外邊距屬性
CSS內(nèi)邊距屬性：邊框線到內(nèi)容間的距離
注：平常我們所說的width和height屬性，它們指內(nèi)容的寬度和高度，不含內(nèi)、外邊距、邊框線。
padding-left：左內(nèi)填充距離，左邊線到內(nèi)容間的距離。
padding-right：右內(nèi)填充距離，右邊線到內(nèi)容間的距離。
padding-top：上內(nèi)填充距離，上邊線到內(nèi)容間的距離。
padding-bottom：下內(nèi)填充距離，下邊線到內(nèi)容間的距離。
縮寫形式
padding:10px; ??//四個(gè)邊的內(nèi)填充分別為10px
padding:10px 20px; ?//上下為10px，左右為20px
padding:5px 10px 20px; ?//上為5px，左右為10px，下為20px
padding:5px 10px 15px 20px; ?//順序一定是“上右下左”
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
.box{
border:1px solid red;
background-color:#f0f0f0;
width:300px;
padding:20px;
}
</style>
</head>
<body>
<div class="box">互聯(lián)網(wǎng)是20世紀(jì)最偉大的發(fā)明，它正在將人類“一網(wǎng)打盡”，人們?cè)诓恢挥X中已經(jīng)融入了互聯(lián)網(wǎng)生態(tài)，互聯(lián)網(wǎng)讓世界變成了“雞犬之聲相聞”的地球村。
</div>
</body>
</html>CSS外邊距屬性：邊線往外的距離
margin-left：左邊線往外的距離。
margin-right：右邊線往外的距離
margin-top：上邊線往外的距離。
margin-bottom：下邊線往外的距離。
縮寫形式
margin:10px; ??//四個(gè)外邊距分別為10px
margin:10px 20px ?//上下外邊距10px，左右外邊距20px
margin:5px 10px 15px; ?//上外邊距5px，左右外邊距10px，下外邊距15px
margin:5px 10px 15px 20px; ?//順序一定是“上右下左”
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
.box{
border:1px solid red;
background-color:#f0f0f0;
width:300px;
margin:20px;
}
</style>
</head>
<body>
<div class="box">互聯(lián)網(wǎng)是20世紀(jì)最偉大的發(fā)明，它正在將人類“一網(wǎng)打盡”，人們?cè)诓恢挥X中已經(jīng)融入了互聯(lián)網(wǎng)生態(tài)，互聯(lián)網(wǎng)讓世界變成了“雞犬之聲相聞”的地球村。
</div>
</body>
</html>注：padding和margin容易混淆，請(qǐng)大家仔細(xì)觀察兩個(gè)例子在輸出上的區(qū)別
