来自web标准margin的嘲笑，你了解我吗？
???? 無意中在藍色理想中看到一篇《不要告訴我你懂margin》，有感，寫出來的。對于作者致敬，請大家幫忙指正。
???? 你真的了解margin嗎？你知道margin有什么特性嗎？你知道什么是垂直外邊距合并？margin在塊元素、內聯元素中的區別？什么時候該用 padding而不是margin？你知道負margin嗎？你知道負margin在實際工作中的用途嗎？常見的瀏覽器下margin出現的bug有哪些？……（引用作者原話）
???? 我們寫css免不了的要與margin這個屬性打交道，而且有的時候還要借助margin來修復因IE的bug，margin是外邊距，我們都知道的。我給它的定義是：他具體的作用是對父元素的邊框內出現距離本身的距離定義。css權威指南是這樣說的：邊界，元素周圍生成額外的空白區。“空白區”通常是指其他元素不能出現且父元素背景可見的區域。w3cschool則是：CSS 邊距屬性定義元素周圍的空間。通過使用單獨的屬性，可以對上、右、下、左的外邊距進行設置。也可以使用簡寫的外邊距屬性同時改變所有的外邊距。
???? 大家已經明白了我對它的稱呼——外邊距，接下來以外邊距來稱呼。
????margin的特性（盜用作者標題）
??? margin，是透明的，在它設置的值的范圍內，父元素的背景色或背景圖片均不受影響，能夠完整的呈現給用戶看到。margin屬性通過單獨的屬性對其上、右、下、左依次進行賦值，我們常見的有margin:10px; OR margin:10px 20px; OR margin:10px 20px 10px 20px;但是你知道：margin:10px 15px 3px;什么意思嗎？你以為它的表達意思是：margin:10px 15px 3px 0px;嗎？？那我來告訴你，錯誤：它的表達意思是margin:10px 15px 3px 15x;呵呵！great。這個才是正確的。在實際應用中，或者閱讀別人代碼的時候不要理解錯誤或者，沒有看到過這個，就隨便猜測作者的想法。
??? margin垂直外邊距不兼容標準？
????實際工作中，垂直外邊距合并問題常見于第一個子元素的margin-top會頂開父元素與父元素相鄰元素的間距，而且只在標準瀏覽器下 (FirfFox、Chrome、Opera、Sarfi)產生問題，IE下反而表現良好。例子可以查看下面代碼(IE下表現“正常”，標準瀏覽器下查看出現“bug”)有代碼有真相：
?1?<html?xmlns="http://www.w3.org/1999/xhtml">?2?<head>
?3?<title>垂直外邊距合并</title>
?4?<style>
?5?.top{width:160px;?height:50px;?background:#ccf;}
?6?.middle{width:160px;?background:#cfc;}
?7?.middle?.firstChild{margin-top:20px;}
?8?</style>
?9?</head>
10??
11?<body>
12?<div?class="top"></div>
13?<div?class="middle">
14???<div?class="firstChild">我其實只是想和我的父元素隔開點距離。</div>
15???<div?class="secondChild"></div>
16?</div>
17?</body>
18?</html>
???? 你來運行一下是不是感覺，這個在IE中顯示正常？而在其他對css2高度兼容的firefox下顯示異常？？我來告訴你，這是因為IEIE的hasLayout渲染導致了這個“表現良好”的外觀。而其他標準瀏覽器則會表現出“有問題”的外觀。如果按照css規范來說，IE的表現是錯誤的，而FirfFox、Chrome、Opera、Sarfi等主流瀏覽器則解析的符合css規范。
??? 舉個例子來說：父元素的第一個子元素的上邊距margin-top如果碰不到有效的border或者padding.就會不斷一層一層的找自己 “領導”(父元素，祖先元素)的麻煩。只要給領導設置個有效的 border或者padding就可以有效的管制這個目無領導的margin防止它越級，假傳圣旨，把自己的margin當領導的margin執行（雖然它的值比“真龍”的值大）。
???? 用Margin還是用Padding
???? 對于這個問題，很多人問過我，他們說，padding和margin為什么要分開用，它們的區別也不大，達到的效果也不差，為什么它們是兩種定義？很多人會容易弄混淆，特別是新手，一般都是新手問我這個問題。
???? 下面我們來說下，為什么要區別來用，padding和margin：
???? 當我們想要在子元素使用背景，而父元素不適應背景，達到圖片“頂住”，文字“不頂住”間隔一段距離的時候要用padding；
???? 當我們讓子元素邊框要頂住父元素，而覆蓋父元素背景圖片或背景色的時候使用padding；
???? 當我們希望讓子元素和父元素有點距離，但不影響父元素背景圖片展示的時候用margin；
???? 當子元素有邊框而父元素無邊框的時候，它們需要產生距離的時候用margin；
???? margin在內聯元素中的表現也是同理。以上為我對margin屬性的理解，還有一個margin的bug我就不在這里闡述了，因為網上已經有很多有識之士，把margin的bug詳細的列了出來。在這里，向大家祝福，端午節快樂！
????? ? （喜歡學習的和想與我探討各種web知識的留下你的郵箱或聯系方式，或者跟我發郵件747850255@qq.com轉載請自覺附上轉載地址，來自博客園“明年開奧迪”)
轉載于:https://www.cnblogs.com/jiawl/archive/2011/06/05/2073143.html
總結
以上是生活随笔為你收集整理的来自web标准margin的嘲笑，你了解我吗？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 收藏老外的jquery web 按钮插件
- 下一篇： 救援模式下解决boot.local修改后