margin

margin屬性為給定元素設置所有四個(上下左右)方向的外邊距屬性。這是四個外邊距屬性設置的簡寫。四個外邊距屬性設置分別是：margin的top和bottom屬性對非替換內聯元素無效，例如和。

瀏覽器支持

瀏覽器都支持margin

語法margin:

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

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

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

margin:inherit

接受1~4個可選參數，每個參數取值如下：只有一個值時，這個值會被指定給全部的四個邊

兩個值時，第一個值被匹配給上和下，第二個值被匹配給左和右

三個值時，第一個值被匹配給上，第二個值被匹配給左和右，第三個值被匹配給下

四個值時，會依次按上、右、下、左的順序匹配(即順時針順序)

取值：| | autoauto：瀏覽器會自動選擇一個合適的margin來應用。它可以用于將一個塊居中。

：獲知可用的計數單位。

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

實例

在現代瀏覽器中，如果要把一些東西水平居中，使用display:flex;justify-content: center;然而，在一些老的瀏覽器，如IE8-9,這些是不可用的。想要把一個元素在其父元素中居中，使用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%;

}

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。