第12天 - 16天搞定前端，CSS的邊距，內外有別？

多程序員朋友，在用CSS進行邊距調整時，老分不清楚外邊距margin和內邊距padding的區別，在我部門，就有兩個迷糊蟲。于是我上網找了一幅圖，一副不可描述的圖(你可不要想歪了)，他們一看就完全明白了，現在分享給你。

12.1 內外抉擇

在什么場景中使用padding，在什么場景中使用margin，這是一個學問。你掌握了，學問就有了。

這是用padding的學問

（1）需要在border內側添加空白，在文字與邊框留有距離時；

（2）空白處需要背景色時；

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

這是用margin的學問

（1）需要在border外側添加空白時;

（2）空白處不需要有背景色時;

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

12.2 內外有別

在CSS中，通過外邊距margin屬性，可設置元素周圍的空間?？捎胢argin統一指定4邊，也可用margin-top等屬性，特指其中一邊。這種方案，在CSS中是很常見的。padding和margin的作用不同，但用法是一樣的。為了區分效果，我只在一個div中用了padding，通過比較，一目了然。

在CSS表文件ys2.css中的代碼

/*單獨指定一個邊距*/
.one-margin {
    margin-left: 100px;
}

/*4個邊距*/
.four-margin {
    background: cadetblue;
    width: 400px;
    height: 200px;
    margin: 10px 20px 30px 50px;
}

/*加上padding*/
.use-padding {
    background: cadetblue;
    width: 400px;
    height: 200px;
    margin: 10px 20px 30px 50px;
    padding-top: 20px;
}

在HTML文件中的代碼

<div class="big-div">
    <h1 class="one-margin">margin用法</h1>
    <div class="four-margin">
        margin一個值：4個邊距;<br/>
        margin兩個值：上下邊距、左右邊距;<br/>
        margin三個值：上邊距、左右邊距、下邊距;<br/>
        margin四個值：上邊距、右邊距、下邊距、左邊距。
    </div>
    <div class="use-padding">
        padding一個值：4個邊距;<br/>
        padding兩個值：上下邊距、左右邊距;<br/>
        padding三個值：上邊距、左右邊距、下邊距;<br/>
        padding四個值：上邊距、右邊距、下邊距、左邊距。<br/>
        為了區分margin和margin，我只用 padding-top,你能看出效果么?
    </div>
</div>

輸出結果

好了，有關CSS邊距的內容，老陳講完了，如果覺得對你有所幫助，希望老鐵能轉發點贊，讓更多的人看到這篇文章。你的轉發和點贊，就是對老陳繼續創作和分享最大的鼓勵。

一個當了10年技術總監的老家伙，分享多年的編程經驗。想學編程的朋友，可關注：老陳說編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關注我，沒錯的。

#前端##HTML5##CSS##程序員##Web#

ss中的負邊距(negative margin)是布局中的一個常用技巧，只要運用得合理常常會有意想不到的效果。

負邊距他符合正常的文檔流特性，w3c也支持使用負邊距，因此他有很好的兼容性不是在使用hack。

在float中使用負邊距可能會在舊的瀏覽器造成一些問題，比如下面的這些：

讓鏈接不可點擊
文本變得很難選中
失去焦點的時候按tab鍵失效

只要對節點添加position:relative屬性就可以解決上述問題。

負邊距+絕對定位實現水平垂直居中

常用的已知寬高讓內容垂直水平居中就是使用絕對定位之后讓內容定位到中心點，然后使用負邊距margin將content的中心拉回到父親節點的中心重合，這樣就達到了垂直居中的目的。如下圖所示：

負邊距實現垂直水平居中

去除掉列表排列中多余的空隙

在項目的開發過程中，經常會有使用浮動列表展示信息的時候，但在設計的時候為了美觀每個item之間都會設置一定的間距來達到信息隔離的目的，并且在設計的時候一般都是使用分散兩段對齊完成布局，但是在代碼實現過程總能都會讓每個item有一個右邊距（margin-right）。這樣導致最右邊的item就會產生一個多余的右邊距而被擠到下一行去。

當代碼是后端渲染后者是循環出來的時候對最右邊的item增加class還得不斷的判斷每個item的索引值，并且當父親節點寬度改變時有可能最右一個item還在不斷的變化中，這個時候就需要對父親節點完成實現負邊距并且在外層實現超出部分隱藏的功能就可以實現。

負邊距實現列的多余margin隱藏

負邊距實現列超出部分的效果

去除列表最后一個li元素的border-bottom

列表中我們經常會使用到border-bottom來讓li與li之間的內容有一個明顯的區分，單最后一個li的邊框會與外邊框連在一起或者重合導致外觀上的不好看，一種方法就是使用css3中的最后一個的選擇器來實現，li:last-of-type{border-bottom:0 none;}

負邊距實現最后一個的border-bottom隱藏

完成左右的自適應布局

在響應式布局中，經常會用到左邊固定右邊自適應或者右邊固定左邊自適應的兩欄布局或者三欄布局，在這種情況中如果不考慮兼容可以使用css的calc函數來實現（100% - 100px）這樣的動態計算值，但是這玩意連中國手機端最大的UC瀏覽器都不支持，所以還是不要想使用了。因此需要用到負邊距來實現頁面布局。

負邊距實現響應式布局

實現多列等高布局

多列等高布局實現起來較為復雜，如果要內容自適應撐大達到等高布局很不好設計，一般的可以使用js來實現高度的自定義，計算那個高度高就用那個。這兒使用極大的padding-bottom來增加高度，然后用負邊距拉回來相互抵消達到高度撐滿整個父親節點的效果。

負邊距實現等高布局

還有部分應用，例如在實現左右都加入了邊框的分頁上，可以使用margin-left： -1px。直接實現抵消中間兩個item都有邊框而導致的邊框疊加的效果。在實現元素的寬度或者高度增加的時候，如果100%已經不能達到需要的數字大小時就可以用負邊距在增加數值來達到目的。

景樣式

1.背景屬性縮寫

Background: 背景色背景圖片背景平鋪方式背景定位

例：body {

background-color:# EDEDED;

background-image:url(images/bg.png);

background-repeat:no-repeat;

background-position:50% 30px;

}

縮寫后：

body { background:#EDEDED url(images/bg.png) no-repeat 50% 30px;}

尺寸樣式

1.寬度

width : auto | length

例：

p { width:300px;} div { width:50%;}

2.高度

height : auto | length

例：

img { height:200px;}

div { height:100px;}

邊框樣式

1.邊框線

例：div { width:300px; height:100px; border-style:solid; ｝

border-top-style 設置上邊框線

border-bottom-style 設置下邊框線

border-left-style 設置左邊框線

border-right-style 設置右邊框線

2.邊框寬度

border-width : medium | thin | thick | length

例：

div { width:300px; height:100px; border-style:solid; border-width:1px; ｝

border-top-width 設置上邊框寬度

border-bottom-width 設置下邊框寬度

border-left-width 設置左邊框寬度

border-right-width 設置右邊框寬度

3.邊框顏色

border-color : color

例：div {

width:300px;

height:100px;

border-style:solid;

border-width:1px;

border-color:#FF0000;

}

border-top-color 設置上邊框顏色

border-bottom-color 設置下邊框顏色

border-left-color 設置左邊框顏色

border-right-color 設置右邊框顏色

4.邊框樣式縮寫

border : border-width || border-style || border-color

例：div {

width:300px;

height:100px;

border-style:solid;

border-width:1px;

border-color:#FF0000;

}

縮寫后：div {

width:300px;

height:100px;

border:1px solid #FF0000;

}

外邊距

margin : auto | length

例：div { width:300px; height:100px; margin:10px;}

div { width:300px; height:100px; margin:0 auto;}

margin-top 設置上邊的外邊距

margin-bottom 設置下邊的外邊距

margin-left設置左邊的外邊距

margin-right設置右邊的外邊距

縮寫型式：

margin: 上邊距右邊距下邊距左邊距

margin: 上下邊距左右邊距

margin: 上邊距左右邊距下邊距

內邊距

padding : length

例：

div { width:300px; height:100px; padding:10px;}

padding-top 設置上邊的內邊距

padding-bottom 設置下邊的內邊距

padding-left設置左邊的內邊距

padding-right設置右邊的內邊距

縮寫型式：

padding: 上邊距右邊距下邊距左邊距

padding : 上下邊距左右邊距

padding : 上邊距左右邊距下邊距

列表樣式

1.項目符號

katakana | katakana-iroha | lower-latin | upper-latin

例：

ul { list-style-type:disc;}/*實心圓*/

ul { list-style-type:circle;}/*空心圓*/

ul { list-style-type:square;}/*實心方塊*/

ul { list-style-type:none;}/*不顯示項目符號*/

ol { list-style-type:decimal;}/*阿拉伯數字*/

ol { list-style-type:lower-roman;}/*小寫羅馬數字*/

ol { list-style-type:upper-alpha;}/*大寫英文字母*/

2.自定義項目符號

list-style-image : none | url ( url )

例：

ul {list-style-image:url(images/arrow.gif)}

鏈接樣式

1.鏈接沒有被訪問時的樣式

a:link

例： a:link { color:#ff0000; }

2.鏈接被訪問后的樣式

a:visited

例： a:link { color:#0000ff; text-decoration:none; }

3.鼠標懸停在鏈接上的樣式

a:hover

例： a:link { background-color:#ccc; }

4.鼠標點擊鏈接時的樣式

a:active

例：a:active { background-color:#ff0000;}

在線咨詢

上一篇：CSS自動換行、強制不換行、強制斷行、超出顯示省略號
下一篇：6.HTML 標題、段落和文本格式

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

第12天 - 16天搞定前端，CSS的邊距，內外有別？

12.1 內外抉擇

12.2 內外有別

負邊距+絕對定位實現水平垂直居中

去除掉列表排列中多余的空隙

去除列表最后一個li元素的border-bottom

完成左右的自適應布局

實現多列等高布局

您的項目需求

第12天 - 16天搞定前端，CSS的邊距，內外有別？