title: What is the difference between margin-block-start and margin-top?
body: <p>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 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-start" rel="noreferrer">here</a>, assuming the following:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    background-color: yellow;
    width: 120px;
    height: 120px;
  }
  
  .exampleText {
    writing-mode: vertical-lr;
    margin-block-start: 20px;
    background-color: #c8c800;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The difference between <a href="https://jsfiddle.net/xuodgqL7/" rel="noreferrer">this instance</a>, and one in which <code>margin-top</code> <a href="https://jsfiddle.net/wy8rh9kb/" rel="noreferrer">is used</a>, is quite small (however visible). </p>
  
  <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top" rel="noreferrer">specifications</a> state that <code>margin-block-start</code> <strong>depends on layout model</strong> while <code>margin-top</code> <strong>refer to the width of the containing block</strong>. Would love it if someone could explain it in layman's term.</p>