前言
因為我最開始是搞伺服器端**的，剛開始根本不看好css，甚至認為js抄一抄改一改就完了！由於這種錯誤的認識，所以css功底很水，曾經認為將做成頁面是件很神奇的事情。
時至今日，我能輕易將一張圖形成頁面，我還能用js寫出簡單的外掛程式，但有乙個是沒有變化的：
我依舊認為css很神奇！很難，比js難......
一方面是自己布局的專案經驗不足，另一方面就是沒有經過系統的學習，所以這塊仍然是我的短板，是問題就需要突破，我不行但有人行！
所以這次用到我的短板css上試試！
引用資料
css margin的相關屬性，問題及應用
css中padding、margin兩個重要屬性的詳細介紹及舉例說明
不要告訴我你懂margin
隆重介紹·張鑫旭
世界上有那麼一種人，屬於他不認識我，但我認識他，他影響著我，但他還是不認識我！其中張鑫旭就是這樣乙個人！
當我前段時間比較迷茫時，不經意間看見了他的部落格，於是我便深深的愛上了他！因為從他的行文中，我感受到了我丟失的專注與細心，特別是他一句話點醒了我，我才為自己設立目標「兩年成為國內優秀前端工程師」的目標，所以在此感謝旭哥，真乃指路明燈啊！
盒模型 box model
要說margin，必定牽扯到盒模型，我這裡不要臉的偷了兩個圖：
請大家注意看第一張圖！這張圖是我見過最棒的一張圖了，他可以很好的解釋塊級元素中margin、padding、background等的關係，畫圖者神人也！
margin是什麼？
css邊距屬性定義元素周圍的空間。通過使用單獨的屬性，可以對上右下左外邊距進行設定。
元素周圍生成的額外空白區，該空白區是指其它元素不能出現且父元素背景可見區域
上面的定義怎麼讀怎麼繞口。。。但基本也就是這個意思，其實margin就是用來將元素隔開罷了。
現在我們來看看margin會為我們的網頁帶來些什麼問題呢？
ie6雙邊距問題
產生條件：塊級元素+float+margin
比如：當給父元素內第乙個浮動元素設定margin-left（元素float:left）或margin-right（元素float:right）時margin加倍。
先上**：
複製** 1
2 9 10
11
12 margin
13
14
15
16 17
複製**
本想簡簡單單做個試驗就算了，結果一float我父級元素就「坍塌」了，這裡還必須處理一番呢。
汗！由於我沒有ie6，這裡看不到bug圖呢。。。這裡只好又偷圖了。。。
大概是以上樣子，我們來看看各位大哥是怎麼樣解決的呢？
其中一位提到了原因：
塊級元素設定浮動並對其設定外邊距，就會出現這種情況，這種情況只會是第乙個元素，後面就不會出現，原因是：
浮動時相對的，第乙個元素對應于父物件而後對應於第乙個物件，所以只有第乙個會出問題。
為元素設定display: inline 可以解決這個問題，是因為inline或者inline-block元素不存在雙邊距問題。
而float: left可以讓inline元素haslayout引發布局，支援高寬
ps：我感覺這個不像是原因而是解決的辦法了。。。
最後我兩位大哥對這個的解散都是一樣的，其中旭哥稍微提了下少用float，這個問題便不了了之啦。。。
margin重疊問題
margin有這樣乙個屬性，水平元素的margin是不會重合的，但是上下元素會發生重合，並且取較大者。
在漂浮框和其它框之間的垂直邊距不重合//ie可以，其它不行
絕對定位框與相對定位框邊距不重合//貌似也有問題
對以上問題，我有點迷糊......
這裡要提到的是乙個實際遇到的問題：
複製** 1
2 10
11
12
14
15 16
複製**
若是我們將**做一點改變：「將外層元素border」去掉；那麼。。
大家發現，一旦缺少屏障，裡面margin: 10px便沒了。。。
所以我在想是不是可以直接給父元素設定乙個padding: 1px便解決問題了
ie6 漂浮元素3px間距bug
當乙個元素浮動，然後乙個不浮動上浮與之靠近會出現3px的bug。
可以使用一起浮動，或者hack_margin-left: -3px解決，
這個也無法測試了。 結語
今日閱讀就到這裡，下次我們接著學習吧！！！
正視CSS 他山之玉可以裝B之細說margin
因為我最開始是搞伺服器端 的，剛開始根本不看好css，甚至認為js抄一抄改一改就完了！由於這種錯誤的認識，所以css功底很水，曾經認為將做成頁面是件很神奇的事情。時至今日，我能輕易將一張圖形成頁面，我還能用js寫出簡單的外掛程式，但有乙個是沒有變化的 我依舊認為css很神奇！很難，比js難.一方面是...