margin-inline
Experimental
これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
The margin-inline
は CSS のプロパティで、論理的なインライン方向の先頭と末尾のマージンを設定します。これは要素の書字方向やテキストの向きに応じて物理的なマージンに変換されます。
/* <length> 値 */
margin-inline: 10px 20px; /* 絶対的な長さ */
margin-inline: 1em 2em; /* テキストの大きさに対する相対値 */
margin-inline: 5% 2%; /* 直近のブロックコンテナーの大きさに対する相対値 */
margin-inline: 10px; /* 先頭と末尾の両方を設定 */
/* キーワード値 */
margin-inline: auto;
/* グローバル値 */
margin-inline: inherit;
margin-inline: initial;
margin-inline: unset;
これらの値は、 margin-top
と margin-bottom
、または margin-right
と margin-left
プロパティに、 writing-mode
, direction
, text-orientation
で定義された値にしたがって対応します。
値は margin-inline-start
と margin-inline-end
で個別に設定することができます。ブロック方向のプロパティは margin-block
で、 margin-block-start
と margin-block-end
を設定します。
構文
値
margin-inline
プロパティは、 margin-left
プロパティと同じ値を取ります。
形式文法
例
HTML
<div>
<p class="exampleText">Example text</p>
</div>
CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exampleText {
writing-mode: vertical-rl;
margin-inline: 20px 40px;
background-color: #c8c800;
}
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Logical Properties and Values Level 1 margin-inline の定義 |
編集者草案 | 初回定義 |
初期値 | 0 |
---|---|
適用対象 | margin と同じ |
継承 | なし |
パーセント値 | レイアウトモデルに依存 |
計算値 | 長さで指定されると相当する絶対的な長さ、パーセント値として指定されると指定値、それ以外では auto |
アニメーションの種類 | 離散値 |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- 対応する物理的プロパティ:
margin-top
,margin-right
,margin-bottom
,margin-left
writing-mode
,direction
,text-orientation