What is the difference between margin-block-start and margin-top?

Question

Trying to understand the core difference in usage between the two, but I fail to find an article or doc that details such a comparison. Taking the example provided here, assuming the following:

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>

The difference between this instance, and one in which margin-top is used, is quite small (however visible).

The specifications state that margin-block-start depends on layout model while margin-top refer to the width of the containing block. Would love it if someone could explain it in layman's term.

Answer 1

From the official¹specification you can read:

These properties correspond to the margin-top, margin-bottom, margin-left, and margin-right properties. The mapping depends on the element’s writing-mode, direction, and text-orientation.

By default, you will have the following mapping:

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

Example:

.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>

Now if we change the writing mode, you will see that we will have a different mapping.

.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>

In the above, you will notice when using vertical-lr a mapping equal to

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

and when using vertical-rl

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

---

I will not detail all the cases, but basically each margin-*-* property will be mapped to a margin-* property based on the values of writing-mode, direction, and text-orientation.

You can play with the different values to see the different cases.

---

Your examples are a bit complex because you are having margin-collapsing and the default margin applied to p so it's difficult to understand.

Here is a better one:

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>

¹: the link you are using is the MDN page which is a good reference but not the official specification.