margin
Baseline 廣泛可用 *
試一試
margin: 1em;
margin: 5% 0;
margin: 10px 50px 20px;
margin: 10px 50px 20px 0;
margin: 0;
<section id="default-example">
<div id="container">
<div class="row"></div>
<div class="row transition-all" id="example-element"></div>
<div class="row"></div>
</div>
</section>
#container {
width: 300px;
height: 200px;
display: flex;
align-content: flex-start;
flex-direction: column;
justify-content: flex-start;
}
.row {
height: 33.33%;
display: inline-block;
border: solid #ce7777 10px;
background-color: #2b3a55;
flex-shrink: 0;
}
#example-element {
border: solid 10px #ffbf00;
background-color: #2b3a55;
}
構成屬性
此屬性是以下 CSS 屬性的簡寫：
語法
css
/* apply to all four sides */
margin: 1em;
margin: -3px;
/* top and bottom | left and right */
margin: 5% auto;
/* top | left and right | bottom */
margin: 1em auto 2em;
/* top | right | bottom | left */
margin: 2px 1em 0 auto;
/* anchor-size() values */
margin: 5% anchor-size(width);
margin: calc(anchor-size(width) / 4) 1em 0
anchor-size(--my-anchor self-inline, 50px);
/* Keyword values */
margin: auto;
/* Global values */
margin: inherit;
margin: initial;
margin: revert;
margin: revert-layer;
margin: unset;
margin 屬性可以透過一個、兩個、三個或四個值來指定。每個值可以是 <length>、<percentage>，或者關鍵字 auto。負值會使元素比預設情況下更靠近其相鄰元素。
- 當指定一個值時，它會應用於所有四個方向的邊距。
- 當指定兩個值時，第一個值應用於上下邊距，第二個值應用於左右邊距。
- 當指定三個值時，第一個值應用於上邊距，第二個值應用於左右邊距，第三個值應用於下邊距。
- 當指定四個值時，邊距按上、右、下、左的順序（順時針方向）應用。
值
<length>-
邊距的大小為固定值。
- 對於錨點定位元素，
anchor-size()函式會解析為一個相對於相關錨點元素寬度或高度的<length>值（參見根據錨點大小設定元素邊距）。
- 對於錨點定位元素，
<percentage>-
邊距的大小為百分比，相對於包含塊的內聯尺寸（在水平書寫模式下是寬度，由
writing-mode定義）。 auto-
瀏覽器選擇一個合適的邊距。例如，在某些情況下，此值可用於使元素居中。
描述
此屬性可用於設定元素所有四個方向的邊距。邊距在元素外部建立額外空間，這與在元素內部建立額外空間的 padding 不同。
水平居中
您可以透過設定 margin: 0 auto; 將元素在其父級內水平居中。
一種更常見的水平居中元素的方法是在容器上設定 display: flex; 和 justify-content: center;，這會使其彈性子項居中。
外邊距摺疊
元素的上下邊距有時會合併成一個單獨的邊距，該邊距等於兩個邊距中的較大值。有關更多資訊，請參見 掌握邊距摺疊。
正式定義
| 初始值 | 作為簡寫中的每個屬性
|
|---|---|
| 應用於 | 所有元素，除了具有 table-caption、table 和 inline-table 以外的表格display 型別的元素。它也適用於 ::first-letter。 |
| 繼承性 | 否 |
| 百分比 | 參照包含塊的寬度 |
| 計算值 | 作為簡寫中的每個屬性
|
| 動畫型別 | 一個長度 |
正式語法
margin =
<'margin-top'>{1,4}
<margin-top> =
<length-percentage> |
auto |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<anchor-name> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
示例
基本示例
HTML
html
<div class="center">This element is centered.</div>
<div class="outside">This element is positioned outside of its container.</div>
CSS
css
.center {
margin: auto;
background: lime;
width: 66%;
}
.outside {
margin: 3rem 0 0 -3rem;
background: cyan;
width: 66%;
}
更多示例
css
margin: 5%; /* All sides: 5% margin */
margin: 10px; /* All sides: 10px margin */
margin: 1.6em 20px; /* top and bottom: 1.6em margin */
/* left and right: 20px margin */
margin: 10px 3% -1em; /* top: 10px margin */
/* left and right: 3% margin */
/* bottom: -1em margin */
margin: 10px 3px 30px 5px; /* top: 10px margin */
/* right: 3px margin */
/* bottom: 30px margin */
/* left: 5px margin */
margin: 2em auto; /* top and bottom: 2em margin */
/* Box is horizontally centered */
margin: auto; /* top and bottom: 0 margin */
/* Box is horizontally centered */
規範
| 規範 |
|---|
| CSS Box Model Module Level 3 # margin |
瀏覽器相容性
載入中…