首頁 > 網頁教程 > CSS > 深入理解CSS的margin屬性(外邊距)

深入理解CSS的margin屬性(外邊距)

時間:2011-05-31    來源:互聯網

你真的了解margin嗎?你知道margin有什么特性嗎?你知道什么是垂直外邊距合并?margin在塊元素、內聯元素中的區別?什么時候該用 padding而不是margin?你知道負margin嗎?你知道負margin在實際工作中的用途嗎?常見的瀏覽器下margin出現的bug有哪些?……

寫css,你少不了與margin打交道,而對于這個平時我們最常用的css屬性我們并非十分了解。介于此我打算寫下這篇文章,一來是自己工作中的總結,也是對自己知識的一次梳理。

Margin是什么

CSS 邊距屬性定義元素周圍的空間。通過使用單獨的屬性,可以對上、右、下、左的外邊距進行設置。也可以使用簡寫的外邊距屬性同時改變所有的外邊距。——W3School

邊界,元素周圍生成額外的空白區。“空白區”通常是指其他元素不能出現且父元素背景可見的區域。——CSS權威指南

我比較喜歡使用“外邊距”這個詞來解釋margin(同理padding可以稱之為“內邊距”,但是我又恰恰喜歡稱呼padding為“補白”或者“留白”),我們可以很清楚的了解到margin的最基本用途就是控制元素周圍空間的間隔,從視覺角度上達到相互隔開的目的。

Margin的特性

margin始終是透明的。

margin通過使用單獨的屬性,可以對上、右、下、左的外邊距進行設置。即:margin-top、margin-right、margin-bottom、margin-left。

外邊距的 margin-width 的值類型有:auto | length | percentage

也可以使用簡寫的外邊距屬性同時改變所有的外邊距:margin: top right bottom left;(eg: margin:10px 20px 30px 40px) 記憶方式是元素周圍正上方順時針“上右下左”記憶。

并且規范還提供了省略的數值寫法,基本如下:

1、如果margin只有一個值,表示上右下左的margin同為這個值。例如:margin:10px; 就等于 margin:10px 10px 10px 10px;

2、如果 margin 只有兩個值,第一個值表示上下margin值,第二個值為左右margin的值。例如:margin:10px 20px; 就等于 margin:10px 20px 10px 20px;

3、如果margin有三個值,第一個值表示上margin值,第二個值表示左右margin的值,第三個值表示下margin的值。例如:margin:10px 20px 30px; 就等于 margin:10px 20px 30px 20px;

4、如果margin有四個值,那這四個值分別對應上右下左這四個margin值。例如:margin:10px 20px 30px 40px;

在實際應用中,個人不推薦使用三個值的margin,一是容易記錯,二是不容易日后修改,一開始如果寫成margin:10px 20px 30px;日后需求改動為上10px,右30px,下30px,左20px,你不得不還是得把這個margin拆開為margin:10px 30px 30px 20px;費力且不討好,不如一開始就老老實實的寫成margin:10px 20px 30px 20px;來的實在,不要為了現在節省倆個字節而讓日后再次開發的成本上升。

垂直外邊距合并問題

別被上面這個名詞給嚇倒了,簡單地說,外邊距合并指的是,當兩個垂直外邊距相遇時,它們將形成一個外邊距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。你可以查看W3Shool CSS外邊距合并了解這個基本知識。

實際工作中,垂直外邊距合并問題常見于第一個子元素的margin-top會頂開父元素與父元素相鄰元素的間距,而且只在標準瀏覽器下 (FirfFox、Chrome、Opera、Sarfi)產生問題,IE下反而表現良好。例子可以查看下面代碼(IE下表現“正常”,標準瀏覽器下查看出現“bug”):

<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <title>垂直外邊距合并</title>
        <style>
        .top{width:160px; height:50px; background:#ccf;}
        .middle{width:160px; background:#cfc;}
        .middle .firstChild{margin-top:20px;}
        </style>
        </head>
        
        <body>
        <div class="top"></div>
        <div class="middle">
        <div class="firstChild">我其實只是想和我的父元素隔開點距離。</div>
        <div class="secondChild"></div>
        </div>
        </body>
        </html>

如果按照CSS規范,IE的“良好表現”其實是一個錯誤的表現,因為IE的hasLayout渲染導致了這個“表現良好”的外觀。而其他標準瀏覽器則會表現出“有問題”的外觀。好了,如果你讀過了上面W3Shcool的CSS外邊距合并的文章后,就很容易討論這個問題了。這個問題發生的原因是根據規范,一個盒子如果沒有上補白(padding-top)和上邊框(border-top),那么這個盒子的上邊距會和其內部文檔流中的第一個子元素的上邊距重疊。

再說了白點就是:父元素的第一個子元素的上邊距margin-top如果碰不到有效的border或者padding.就會不斷一層一層的找自己 “領導”(父元素,祖先元素)的麻煩。只要給領導設置個有效的 border或者padding就可以有效的管制這個目無領導的margin防止它越級,假傳圣旨,把自己的margin當領導的margin執行。 對于垂直外邊距合并的解決方案上面已經解釋了,為父元素例子中的middle元素增加一個border-top或者padding-top即可解決這個問題。

一般說來這個問題解釋到這里,大多數文章就不會再深入下去了,但作為一名實戰開發者,最求的是知其然知其所以然,原本使用margin-top就是為了與父元素隔開距離,而按照你這么一個解法,其實是一種“修復”,為了“彌補修復”這個父子垂直外邊距合并這個CSS規范“Bug”,而強制在父元素上使用border-top和padding-top,不舒服,也不容易記住,下次再發生這樣的情況還是會忘記這條準則,而且在頁面設計稿里如果不需要 border-top加個上邊框,這么一加反而畫蛇添足,為以后修改留下隱患。

為什么一定要用border-top,padding-top去為了這么一個所謂的標準規范而多寫這么一行代碼呢?答案你可以參考另外一篇文章用Margin還是用Padding里找到答案。

用Margin還是用Padding

何時應當使用margin:

需要在border外側添加空白時。

空白處不需要背景(色)時。

上下相連的兩個盒子之間的空白,需要相互抵消時。如15px + 20px的margin,將得到20px的空白。

何時應當時用padding:

需要在border內測添加空白時。

空白處需要背景(色)時。

上下相連的兩個盒子之間的空白,希望等于兩者之和時。如15px + 20px的padding,將得到35px的空白。

個人認為:margin是用來隔開元素與元素的間距;padding是用來隔開元素與內容的間隔。margin用于布局分開元素使元素與元素互不相干;padding用于元素與內容之間的間隔,讓內容(文字)與(包裹)元素之間有一段“呼吸距離”。

這里我截取了部分另外一篇文章的內容,詳細內容請見用Margin還是用Padding

相關推薦
CSS進階:用Margin還是用Padding?
CSS:清除多余的標簽讓代碼更加有意義
DIV+CSS布局兩列右列寬度自適應布局的不同實現方法
CSS排版中常遇到的五個問題及解決辦法
CSS網頁布局有關中文排版的九個技巧
詳解如何用div+css模擬表格對角線
Firefox與IE瀏覽器在CSS樣式表中的差異
加一段代碼讓IE6支持hover偽類效果
用CSS來控制字符長度和顯示長度
CSS代碼不同書寫風格的優缺點
如何使一個DIV層居中于瀏覽器中?
正確理解CSS規則的優先級算法
創建高效CSS代碼的五個好習慣
最新全面兼容ie6,ie7,ie8,ff的CSS HACK寫法
理解CSS的查找匹配原理,打造簡潔高效的CSS代碼
掌握跨瀏覽器兼容的CSS代碼編寫準則
21個令人驚嘆的CSS技術(案例)展示
CSS框架到底有那些優點與缺點?
如何使用CSS控制網頁打印頁面格式?
CSS中30個最常用的選擇器,你學會了嗎?
WEB前端開發應該注意的問題8點(原創技巧)
xhtml+css 復雜的視覺效果解決方案與技巧(原創技巧)
CSS新手入門教程:CSS代碼編寫須注意的八大細節
資深seo利用css樣式作弊手法全解
CSS新手教程:30個CSS常見問題的分析及解決方法
10種導致CSS布局頁面錯亂的解決方法分享
css教程:解決float屬性的元素父元素高度不能自適應
CSS教程:清理浮動簡潔有效的方式分享
CSS Sprites(CSS精靈)技術及其優化經驗分享
IE6下文字或圖片神秘消失的原因及解決方法分享
CSS相對定位實現div容器絕對居中的簡單方法分享
8種CSS清除浮動的方法優缺點分析
高效CSS開發需要注意的要點以及提升性能的做法
CSS3實現透明邊框的方法分享

精彩推薦

熱門教程

北京pk10走势图下载 全球股票指数行情 工厂里卖什么最赚钱吗 多乐彩开奖结果 31选7 时时彩后一5码平刷 润升娱乐 吉林市一毛麻将微信群 老11选5 pptv体育直播 江西快3开奖走势图 2018炸金花棋牌游戏 快乐10分钟计划