BinaryDevelop
  1. ホーム
  2. html

[解決済み] margin-block-startとmargin-topの違いは何ですか？

2022-02-11 07:36:23

質問事項

両者の使い方の違いを理解したいのですが、そのような比較を詳しく説明している記事やドキュメントを見つけることができません。提供された例を取ると こちら を想定して、以下のようにします。 

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

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

<div>
  <p class="exampleText">Example text</p>
</div>

との違いは このインスタンス とは異なり margin-top が使われています。 は、かなり小さいです（ただし、見える）。

は、その 仕様書 と記載されています。 margin-block-start レイアウトモデルに依存する 一方 margin-top 包含するブロックの幅を参照する . どなたか平易な言葉で説明していただけると幸いです。

どのように解決するのですか？

公式より 1 仕様 を読むことができます。

これらのプロパティは、margin-top, margin-bottom, margin-left, margin-rightプロパティに対応する。マッピングは、要素のwriting-mode、direction、text-orientationに依存する。

デフォルトでは、以下のようなマッピングになります。 

margin-block-start = margin-top
margin-block-end = margin-bottom
margin-inline-start = margin-left
margin-inline-end = margin-right

例 

.margin {
  margin-top:50px;
  margin-bottom:10px;
  margin-left:100px;
  margin-right:200px;
}

.margin-alt {
  margin-block-start:50px;
  margin-block-end:10px;
  margin-inline-start:100px; 
  margin-inline-end:200px; 
}

div {
  border:2px solid;
  padding:20px;
}

<div class="margin">
A
</div>
<hr>
<div class="margin-alt">
A
</div>

ここで、書き込みモードを変更すると、異なるマッピングになることがおわかりいただけると思います。 

.margin {
  margin-top:50px;
  margin-bottom:10px;
  margin-left:100px;
  margin-right:200px;
}

.margin-alt {
  margin-block-start:50px;
  margin-block-end:10px;
  margin-inline-start:100px; 
  margin-inline-end:200px; 
}

div {
  border:2px solid;
  padding:20px;
  writing-mode: vertical-lr;
}

<div class="margin">
A
</div>
<hr>
<div class="margin-alt">
A
</div>
<div class="margin-alt" style="writing-mode: vertical-rl;">
A
</div>

上記で vertical-lr に相当するマッピングが 

margin-block-start = margin-left
margin-block-end = margin-right
margin-inline-start = margin-top 
margin-inline-end = margin-bottom

を使用する場合は vertical-rl 

margin-block-start = margin-right
margin-block-end = margin-left
margin-inline-start = margin-top 
margin-inline-end = margin-bottom

すべてのケースの詳細は省きますが、基本的にはそれぞれ margin-*-* プロパティは margin-* の値に基づいて writing-mode , direction および text-orientation .

さまざまな値で遊んで、さまざまなケースを確認することができます。

あなたの例は、マージン折りたたみとデフォルトマージンを p ということで、わかりにくいですね。

より良いものを紹介します。 

div:not([class]) {
  background-color: yellow;
  width: 120px;
  height: 120px;
  border:1px solid;
}

.exampleText {
  writing-mode: vertical-lr;
  margin-block-start: 20px; /* we will end with a margin-left */
  background-color: #c8c800;
}
.exampleText2 {
  writing-mode: vertical-lr;
  margin-top: 20px; /* this will remain a margin-top */
  background-color: #c8c800;
}

<div>
  <div class="exampleText">Example text</div>
</div>

<div>
  <div class="exampleText2">Example text</div>
</div>

1 : あなたが使っているリンクは MDN のページで、これは良い参考資料ですが、公式の仕様ではありません。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します