今天學盒模型，學了兩個最重要的元素：margin和padding。
盒模型是布局中至關重要的乙個東西，基本上只要掌握了盒模型，布局就沒有大礙。而margin和padding作為盒模型裡面極其重要的兩個元素，弄懂這兩個東西，就基本上弄懂了盒模型，也基本上具備了快速布局的能力。
盒模型如下圖：
從上圖可以知道，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用於在元素和內容之間新增間隔。
margin塌陷和margin合併問題及解決方案
父子巢狀元素在垂直方向的margin,父子元素是結合在一起的,他們兩個的margin會取其中最大的值.正常情況下,父級元素應該相對瀏覽器進行定位,子級相對父級定位.但由於margin的塌陷,父級相對瀏覽器定位.而子級沒有相對父級定位,子級相對父級,就像坍塌了一樣.margin塌陷解決方法1.給父級設...
margin和padding之我見
採用div css排版的話,如果有float屬性,在ie中選中文字的時候,經常會出現把一整個div全部選中,非常難看 而有時候又不會出現這種情況,自己是不是遇到過了?呵呵,奇怪吧,我來給你講.其實原因很簡單,主要看你做事是不是細心.這個就是margin和padding的區別了.如果你不知道margi...
前端 margin用法 盒子模型裡補充
當時說到了盒模型，盒模型包含著margin，為什麼要在這裡說margin呢？因為元素和元素在垂直方向上margin裡面有坑。我們來看乙個例子 html結構 css樣式 father box1 box2 當給兩個標準流下兄弟盒子 設定垂直方向上的margin時，那麼以較大的為準，那麼我們稱這種現象叫塌...