くまだどうも、くまだです。
margin-inlineについてのあれこれ。
margin-inline
margin-inlineはインライン方向の先頭と末尾のマージンを指定できるプロパティです。
<div class="box"></div>.box {
width: 100px;
height: 100px;
background: red;
margin-inline: auto;
}
こんな感じで左右中央寄せできます。
普通のmarginで中央寄せする場合との違いは、例えば以下のような縦書きのとき、
<p class="text">南十字へ着きますのは、ある裏町の小さな家でした。ごとごと鳴る汽車のひびきと、すすきの風との間にいっぱい日光を吸った金剛石のようになったみじかい芝草の中に入れるのでした。二人がそのあかしの前を通って行きました。この前お父さんが持ってきてあげましょうか、と言ったら眼がさめたというふうでした。すると、向こうの河岸に二本の電信ばしらが、ちょうどさっきのような小さな青い火が見える</p>
<p class="text2">南十字へ着きますのは、ある裏町の小さな家でした。ごとごと鳴る汽車のひびきと、すすきの風との間にいっぱい日光を吸った金剛石のようになったみじかい芝草の中に入れるのでした。二人がそのあかしの前を通って行きました。この前お父さんが持ってきてあげましょうか、と言ったら眼がさめたというふうでした。すると、向こうの河岸に二本の電信ばしらが、ちょうどさっきのような小さな青い火が見える</p>
.text {
writing-mode: vertical-rl;
max-width: 300px;
margin-inline: 100px 200px;
}
.text2 {
writing-mode: vertical-rl;
max-width: 300px;
margin-right: 100px;
margin-left: 200px;
}.text {
writing-mode: vertical-rl;
width: 100%;
max-width: 300px;
margin-inline: 50px 50px;
}
.text2 {
writing-mode: vertical-rl;
width: 100%;
max-width: 300px;
margin-right: 50px;
margin-left: 50px;
}〇 margin-inlineの場合
〇 普通のmarginの場合
こんな感じで、縦書きの場合margin-inlineは上下方向に余白、通常のmarginは左右に余白が付きます。
margin-inlineは論理プロパティ、marginは物理プロパティとなります。
論理プロパティは要素の書字方向やテキストの向きに応じて設定されます。
margin-inlineは一括指定の書き方で、以下のプロパティを一括指定したものになります。
margin-inline-start: auto;
margin-inline-end: auto;
ここまで読んでくださりありがとうございました。