margin-block
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.
試してみましょう
構成要素のプロパティ
このプロパティは以下の CSS プロパティの一括指定です。
構文
css
/* <length> 値 */
margin-block: 10px 20px; /* 絶対的な長さ */
margin-block: 1em 2em; /* テキストの大きさに対する相対値 */
margin-block: 5% 2%; /* 直近のブロックコンテナーの大きさに対する相対値 */
margin-block: 10px; /* 先頭と末尾の両方を設定 */
/* キーワード値 */
margin-block: auto;
/* グローバル値 */
margin-block: inherit;
margin-block: initial;
margin-block: revert;
margin-block: revert-layer;
margin-block: unset;
このプロパティは、 margin-top
と margin-bottom
、または margin-right
と margin-left
プロパティに、 writing-mode
, direction
, text-orientation
で定義された値にしたがって対応します。
margin-block
プロパティは、 1 つまたは 2 つの値を使用して指定します。
- 1 つの値が指定された場合は、先頭と末尾の両方に同じマージンを適用します。
- 2 つの値が指定された場合は、 1 つ目のマージンが先頭に、 2 つ目のマージンが末尾に指定されます。
値
margin-block
プロパティは、 margin
プロパティと同じ値を取ります。
公式定義
初期値 | 一括指定の次の各プロパティとして |
---|---|
適用対象 | margin と同じ |
継承 | なし |
パーセント値 | レイアウトモデルに依存 |
計算値 | 一括指定の次の各プロパティとして
|
アニメーションの種類 | length |
形式文法
margin-block =
<'margin-top'>{1,2}
<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
例
ブロック方向の先頭と末尾のマージンを設定
CSS
css
div {
background-color: yellow;
width: 120px;
height: auto;
border: 1px solid green;
}
p {
margin: 0;
margin-block: 20px 40px;
background-color: tan;
}
.verticalExample {
writing-mode: vertical-rl;
}
HTML
html
<div>
<p>Example text</p>
</div>
<div class="verticalExample">
<p>Example text</p>
</div>
結果
仕様書
Specification |
---|
CSS Logical Properties and Values Level 1 # propdef-margin-block |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- CSS 論理的プロパティと値
- 対応する物理的プロパティ:
margin-top
,margin-right
,margin-bottom
,margin-left
writing-mode
,direction
,text-orientation