margin外邊距、padding內(nèi)邊距詳解

        這是二胖帶給大家的第一篇文章，希望大家喜歡，看好二胖就點個贊唄。

一、認識谷歌等瀏覽器中“審查元素”中的盒模型。

查看一個元素，只需要看這個圖，你就應(yīng)該知道該對象有這幾個屬性值：

        1、寬高（336px*114px）

        2、padding：3px

        3、border-width：1px

        4、margin-bottom：10px

二、padding內(nèi)邊距

現(xiàn)在二胖帶大家看看，沒有內(nèi)邊距的時候，文字在div中的樣子。

        是不是超難受。

所以二胖來寫一段代碼，讓它變得沒有那么難受。

 藍色邊框是border，文字是內(nèi)容，border和文字之間的間隔就是內(nèi)邊距。換句話說，如果border是墻壁的話，那么內(nèi)邊距就是墻壁和家具之間的縫隙，是房子內(nèi)部的距離，這樣再來看就沒有沒有加padding時候舒服多了。

當(dāng)然，padding的值可以有四個，分別為：

        padding-top /*上內(nèi)邊距*/

        padding-right/*右內(nèi)邊距*/

        padding-bottom/*下內(nèi)邊距*/

        padding-left/*左內(nèi)邊距*/

        可以單獨定義任意一邊的內(nèi)邊距，不過，我們大部分都是用padding來簡寫。

        從上開始，順時針方向。

比如：

        記住順時針方向，很容易搞定。

  所以，padding是讓容器的邊邊和內(nèi)容之間產(chǎn)生留白，就好像書本的頁邊距一樣。適當(dāng)?shù)牧舭卓梢宰屢曈X很舒服，不至于擁擠，是不是很有用呢，哈哈，二胖希望自己的這樣的解釋能您很好的認識padding的用法。

三、margin外邊距

        如果說padding是房子內(nèi)部的距離，那么margin就是房子和房子之間的走道了。

 1和2兩個容器要產(chǎn)生間隔，這屬于兩個容器之間的距離了，是外部的間隔，所以要用margin

才能解決。

 為上面的容器添加了margin-bottom:10px的代碼，實現(xiàn)了間隔。

 margin的語法結(jié)構(gòu)和padding一模一樣，需要明白的是以border為墻壁，padding是border以內(nèi)，容器和自身內(nèi)容的間距。margin是border以外，容器和容器之間的間隔。

        margin-top /*上外邊距*/

        margin-right/*右外邊距*/

        margin-bottom/*下外邊距*/

        margin-left /*左外邊距*/

        簡寫的方法和padding一樣，這里不再累述。

四、小技巧

 1、margin的值除了正值以外，還可以是負值，還可以是auto。

為一個固定寬度的div做相對于瀏覽器居中對齊，可以使用如下代碼：

  1.瀏覽器的寬度是不固定的，有1024px、1280px、1440px、1920px等各種大小的瀏覽器，但是div的寬度固定了，這樣就能計算剩余的寬度，讓左右外邊距自動平分，就可以實現(xiàn)居中對齊了。

  2. 當(dāng)容器不浮動的時候，上下兩個容器都設(shè)置了margin值，則margin值會產(chǎn)生重疊。比如上面一個容器有margin-bottom:20px，下面容器有margin-top:30px;則這個時候的margin值取大的那個值，而不是兩個值的疊加。

  所以，設(shè)置margin的時候，能單方向設(shè)置最好，還有能夠用padding解決的間隔，就不要用margin。

 3. 當(dāng)容器浮動的時候，設(shè)置了margin-left的值，則在IE6中第一個浮動對象的左外邊距會加倍，只需要添加display:inline則可以解決。不過現(xiàn)在IE6幾乎已經(jīng)不使用了，知道這個bug可以避免在浮動的時候設(shè)置左外邊距。

  好了，css中的padding和margin，二胖今天就解釋到這里了，希望大家可以喜歡我的第一篇文章。