margin

margin屬性為給定元素設(shè)置所有四個(gè)(上下左右)方向的外邊距屬性。這是四個(gè)外邊距屬性設(shè)置的簡(jiǎn)寫。四個(gè)外邊距屬性設(shè)置分別是：margin的top和bottom屬性對(duì)非替換內(nèi)聯(lián)元素?zé)o效，例如和。

瀏覽器支持

瀏覽器都支持margin

語法margin:

margin:/*<二值語法>縱向橫向*/舉例： margin: 5% auto;

margin:/*<三值語法>上橫向下*/舉例： margin: 1em auto 2em;

margin:/*<四值語法>上右下左*/舉例： margin: 2px 1em 0 auto;

margin:inherit

接受1~4個(gè)可選參數(shù)，每個(gè)參數(shù)取值如下：只有一個(gè)值時(shí)，這個(gè)值會(huì)被指定給全部的四個(gè)邊

兩個(gè)值時(shí)，第一個(gè)值被匹配給上和下，第二個(gè)值被匹配給左和右

三個(gè)值時(shí)，第一個(gè)值被匹配給上，第二個(gè)值被匹配給左和右，第三個(gè)值被匹配給下

四個(gè)值時(shí)，會(huì)依次按上、右、下、左的順序匹配(即順時(shí)針順序)

取值：| | autoauto：瀏覽器會(huì)自動(dòng)選擇一個(gè)合適的margin來應(yīng)用。它可以用于將一個(gè)塊居中。

：獲知可用的計(jì)數(shù)單位。

：相對(duì)于該元素的包含塊的寬度(相對(duì)于該塊的百分比)。該值可以為負(fù)數(shù)。

實(shí)例

在現(xiàn)代瀏覽器中，如果要把一些東西水平居中，使用display:flex;justify-content: center;然而，在一些老的瀏覽器，如IE8-9,這些是不可用的。想要把一個(gè)元素在其父元素中居中，使用margin: 0 auto;margin: 5%; /* 所有的邊都是 5% 的邊距 */

margin: 10px; /* 所有的邊都是 10像素 的邊距 */

margin: 1.6em 20px; /* 上和下邊是 1.6字距, 左和右是 20像素 邊距 */

margin: 10px 3% 1em; /* 上邊 10像素, 左和右 3%, 下邊 1字距 邊距 */

margin: 10px 3px 30px 5px; /* 上邊 10像素, 右邊 3像素, bottom 30px, left 5px margin */

margin: 1em auto; /* 上和下邊 1字距 邊距, 該盒子是水平居中的 */

margin: auto; /* 該盒子是水平居中的, 上下邊距為0 *///html

margin: auto;

background: gold;

width: 66%;

margin: 20px 0 0 -20px;

background: gold;

width: 66%;

//CSS

.ex1 {

margin: auto;

background: gold;

width: 66%;

}

.ex2 {

margin: 20px 0px 0 -20px;

background: gold;

width: 66%;

}

總結(jié)

以上是生活随笔為你收集整理的html外边距的复合属性是,margin的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。