margin-inline-end
Experimental
これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
margin-inline-end
は CSS のプロパティで、要素のインライン方向の論理的な末尾側のマージンを定義し、それが要素の書字方向やテキストの方向に応じて物理的なマージンに対応付けられます。これは margin-top
, margin-right
, margin-bottom
, margin-left
の何れかのプロパティに対応し、どれに対応するかは writing-mode
, direction
, text-orientation
で定義された値によって決まります。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
構文
/* <length> 値 */
margin-inline-end: 10px; /* 絶対的な長さ */
margin-inline-end: 1em; /* テキストの大きさに対する相対値 */
margin-inline-end: 5%; /* 直近のブロックコンテナーの大きさに対する相対値 */
/* キーワード値 */
margin-inline-end: auto;
/* グローバル値 */
margin-inline-end: inherit;
margin-inline-end: initial;
margin-inline-end: unset;
関連プロパティとして、要素の他のマージンを定義する margin-block-start
, margin-block-end
, margin-inline-start
があります。
初期値 | 0 |
---|---|
適用対象 | margin と同じ |
継承 | なし |
パーセント値 | レイアウトモデルに依存 |
計算値 | 長さで指定されると相当する絶対的な長さ、パーセント値として指定されると指定値、それ以外では auto |
アニメーションの種類 | length |
値
margin-inline-end
プロパティは margin-left
プロパティと同じ値を取ります。
形式文法
例
HTML
<div>
<p class="exampleText">Example text</p>
</div>
CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exampleText {
writing-mode: vertical-lr;
margin-inline-end: 20px;
background-color: #c8c800;
}
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Logical Properties and Values Level 1 margin-inline-end の定義 |
編集者草案 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
margin-inline-start
- 対応付け先の物理的なプロパティ:
margin-top
,margin-right
,margin-bottom
,margin-left
writing-mode
,direction
,text-orientation