Trato de entender la diferencia central en el uso entre los dos, pero no puedo encontrar un artículo o documento que detalle tal comparación. Tomando el ejemplo proporcionado aquí , asumiendo lo siguiente:
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> La diferencia entre esta instancia y otra en la que se usa margin-top es bastante pequeña (aunque sea visible).
Las especificaciones establecen que margin-block-start depende del modelo de diseño, mientras que margin-top se refiere al ancho del bloque contenedor . Me encantaría que alguien pudiera explicarlo en términos sencillos.
De la especificación oficial 1 se puede leer:
Estas propiedades corresponden a las propiedades margin-top, margin-bottom, margin-left y margin-right. La asignación depende del modo de escritura, la dirección y la orientación del texto del elemento.
De forma predeterminada, tendrá la siguiente asignación:
margin-block-start = margin-top margin-block-end = margin-bottom margin-inline-start = margin-left margin-inline-end = margin-rightEjemplo:
.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>Ahora si cambiamos el modo de escritura, verás que tendremos un mapeo diferente.
.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> En lo anterior, notará al usar vertical-lr un mapeo igual a
margin-block-start = margin-left margin-block-end = margin-right margin-inline-start = margin-top margin-inline-end = margin-bottom y cuando se usa vertical-rl
margin-block-start = margin-right margin-block-end = margin-left margin-inline-start = margin-top margin-inline-end = margin-bottom No detallaré todos los casos, pero básicamente cada propiedad margin-*-* se asignará a una propiedad margin-* según los valores de writing-mode , direction y text-orientation .
Puedes jugar con los diferentes valores para ver los diferentes casos.
Sus ejemplos son un poco complejos porque tiene margen colapsado y el margen predeterminado se aplica a p , por lo que es difícil de entender.
Aquí hay uno mejor:
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 : el enlace que está utilizando es la página de MDN, que es una buena referencia pero no la especificación oficial.
La propiedad CSS margin-block-start define el margen de inicio del bloque lógico de un elemento, que se asigna a un margen físico según el modo de escritura, la direccionalidad y la orientación del texto del elemento.
Ejecute el fragmento para ver el comportamiento en acción:
document.addEventListener('DOMContentLoaded', event => { const choice = document.querySelectorAll('.choice'); const target = document.querySelectorAll('.row-target')[0]; choice.forEach(el => el.addEventListener('click', event => { choice.forEach(el => el.classList.remove('selected')); event.target.classList.add('selected'); target.setAttribute('style', event.target.innerText); })); }) * { box-sizing: border-box; } #container { width: 300px; height: 200px; display: flex; align-content: flex-start; flex-direction: column; justify-content: flex-start; margin-left: 20px; } .row { height: 33.33%; display: inline-block; border: solid #5b6dcd 10px; background-color: rgba(229,232,252,.6); flex-shrink: 0; } .row-target { border: solid 10px #ffc129; background-color: rgba(255,244,219,.6); } .transition-all { transition: all .3s ease-in; } .choice { background-color: #fff; display: flex; align-items: center; flex-grow: 1; position: relative; z-index: 1; display: block; margin: .2em 0; width: 100%; border: 2px solid #d6dee0; border-left: 5px solid #d6dee0; font-size: 14px; cursor: pointer; transition: background-color .2s ease-out,border .2s ease-out; } .choice.selected:before { opacity: 1; right: -1.5em; } .choice:before { content: ''; position: absolute; top: 50%; right: -10px; z-index: 1; opacity: 0; transition: all .2s ease-out; transform: translateY(-50%); border-left: 10px solid #1b76c4; border-top: 10px solid transparent; border-bottom: 10px solid transparent; } .selected { border-color: #1b76c4; border-left-color: #1b76c4; box-shadow: inset 0 2px 2px -2px rgb(0 0 0 / 20%); transition: height .5s; cursor: text; } <table> <tr> <td> <div class="choice selected"> margin-block-start: 20px; <br> writing-mode: horizontal-tb; </div> <div class="choice"> margin-block-start: 20px; <br> writing-mode: vertical-rl; </div> <div class="choice"> margin-block-start: 20%; <br> writing-mode: horizontal-tb; </div> <div class="choice"> margin-block-start: auto; <br> writing-mode: vertical-lr; </div> </td> <td valign="top"> <div id="container"> <div class="row">One</div> <div class="row row-target transition-all" id="example-element" style="margin-block-start: 20px; writing-mode: horizontal-tb;">Two</div> <div class="row">Three</div> </div> </td></tr> </table>