盒模型中padding、border、margin的區別
阿新 • • 發佈:2017-11-11
style 語法 add 不能 示例 部分 width alt 字體
在CSS中,規定了一種基本設計模型——盒模型(也叫框模型),如圖所示:
其中包含了四部分內容:element/元素(即圖中文字)、padding/內邊框(圖中兩個紅色邊框之間白色部分)、border/邊框(藍色區域)、margin/外邊框(圖中兩綠色邊框中間白色部分)。
區別:
- element占據的就是字體本身的字號大小;
- padding和margin 類似,指的是一段距離,只能設置上、下、左、右方向的一段長度,不能設置區域顏色;
- 而border指的是一塊區域,可以設置上下左右方向的長度,而且可以設置這段空間的顏色上下
- padding、border、margin三者都可以對上、下、左、右四個方向設置不同的寬度。
下面對各項的語法規則做一個簡單對比
font-size: 20px; /*設置element的字號*/ padding-top:20px; /*設置padding上框高度*/ padding-right:30px; /*設置padding右框寬度*/ padding-bottom:40px; /*設置padding下框寬度*/ padding-left:50px; /*設置padding左框寬度*/ margin: T R B L; /*與padding用法基本相同,此處示例四個方向邊框寬度的合並設置語法規則*/ border: size style color; /*border也可像padding和margin設置不同方向邊框的寬度,此處示例對border 一步設定大小、風格(斜體)、顏色。*/
盒模型中padding、border、margin的區別