More than 5 years have passed since last update.

margin-blockについて

Last updated at 2020-04-23Posted at 2020-04-23

margin-blockはCSSのプロパティで、論理的なブロックの先頭と末尾のマージンを設定する。これは要素の書字方向やテキストの向きに応じて。物理的なマージンに変換される。

/* 値 /
margin-block: 30px 30px; / 絶対的な長さ /
margin-block: 2em 2em; / 直近のブロックコンテナーの大きさに対する相対値 */
margin-block: 20px; /*先頭と末尾の両方を設定 */

/* キーワード値 */
margin-block: auto;

/* グローバル値 */
margin-block: inherit;
margin-block: initial;
margin-block: unset;

これらの値は、margin-topとmargin-bottom,またはmargin-rightとmargin-leftプロパティに、writing-mode,direction,text-orientationで定義された値にしたがって対応する。

値は、margin-block-startとmargin-block-endで個別に設定することができる。インライン方向のプロパティはmargin-inlineで、margin-inline-startとmargin-inline-endを設定する。

構文

値：margin-blockプロパティは、margin-leftプロパティと同じ値をとる。

形式文法：<'margin-left'>{1,2}

例

HTML

Example text

CSS

div {
background-color: yellow;
width: 120px;
height: 120px;
}

.exampleText {
writing-mode: vertical-rl;
margin-block: 20px 40px;
background-color: #c8c800;
}