margin和padding的使用
阿新 • • 發佈:2018-12-11
今天學盒模型,學了兩個最重要的元素:margin和padding。
盒模型是佈局中至關重要的一個東西,基本上只要掌握了盒模型,佈局就沒有大礙。而margin和padding作為盒模型裡面極其重要的兩個元素,弄懂這兩個東西,就基本上弄懂了盒模型,也基本上具備了快速佈局的能力。
盒模型如下圖:
- Margin - 邊界外的透明區域。
- Border - 邊框在填充和內容周圍。
- Padding - 內容周圍的透明區域。
- Content - 實際文字和影象。
從上圖可以知道,margin稱作外邊距,用來定義元素周圍的空間。
1、margin語法示例:
屬性 | 作用 |
margin-top:5px; | 定義上邊距為5px |
margin-right:5px; | 定義右邊距5px |
margin-bottom:5px; |
定義下邊距5px |
margin-left:5px; | 定義做邊距5px |
當然,這些屬性除了可以單個設定,它也可以一起設定。
四個值時 | margin:上 右 下 左 (即順時針方向) |
三個值時 | margin;上 左右 下 |
兩個值時 | margin:上 下 |
一個值時 | margin:上下左右 |
2、padding語法示例
padding用於在設定頁面中一個元素內容到元素的邊緣(邊框) 之間的距離,也稱作留白。
它用於調整內容在容器中的關係、子元素在父元素中的關係。padding需要設定在父元素中。
padding的語法和margin類似,使用方法也一樣。只不過padding值是額外加在元素原有大小之上的,如想保證元素大小不變,需從元素寬或高上減掉後新增的padding屬性值
從功能上來看,padding和margin很多時候的效果一樣,但他們兩個的使用還是有些區分的。
用margin:
- 需要在border外新增空白時。
- 空白處不需要父元素背景色時。
用padding:
- 需要在border內側新增空白時。
- 空白處需要父元素背景色時。
此外,margin和padding還有一個作用的區分:當你想要兩個相連的盒子之間的空白為35px,時,你可以設定第一個盒子的margin-bottom為34px,或者第二個盒子的margin-top為35px;你也可以分別設定第一個盒子的padding為15px,第二個盒子的padding為20px;
總而言之,margin時用來隔開元素的間距,而padding時用來隔開元素與內容。margin在佈局是用來分隔開各個元素,使其互不相干,而padding用於在元素和內容之間新增間隔。