Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

  

La propiedad de CSS margin-block define el bloque lógico de inicio y fin de las márgenes de un elemento, que se asigna a las márgenes físicas en función del modo de escritura del elemento, la direccionalidad y la orientación del texto.

/* <length> values */
margin-block: 10px 20px;  /* An absolute length */
margin-block: 1em 2em;   /* relative to the text size */
margin-block: 5% 2%;    /* relative to the nearest block container's width */
margin-block: 10px; /* sets both start and end values */

/* Keyword values */
margin-block: auto;

/* Global values */
margin-block: inherit;
margin-block: initial;
margin-block: unset;

 

Estos valores corresponden a margin-top y  margin-bottom, o margin-right, y margin-left depende de los valores definidos para writing-mode, direction, y text-orientation.

Los valores se pueden establecer individualmente como margin-block-start y margin-block-end. La propiedad de dirección en línea es margin-inline que establece margin-inline-start, y margin-inline-end.

Sintaxis

Valores

La propiedad margin-block toma los mismos valores de la propiedad margin-left.

Sintaxis formal

<'margin-left'>{1,2}

Ejemplo

Contenido HTML

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

Contenido CSS

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

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

Especificación

Especificación Estado Comentario
CSS Logical Properties and Values Level 1
La definición de 'margin-block' en esta especificación.
Editor's Draft Definición inicial.

Valor inicial0
Applies tosame as margin
Heredableno
Percentagesdepends on layout model
Mediavisual
Valor calculadoif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
Animation typediscrete
Canonical orderel orden único no-ambigüo definido por la gramática formal

Compatibilidad en navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidEdge MobileFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
margin-block
Experimental
Chrome Soporte completo 69
Deshabilitado
Soporte completo 69
Deshabilitado
Deshabilitado From version 69: this feature is behind the Experimental Web Platform Features preference (needs to be set to enabled). To change preferences in Chrome, visit chrome://flags.
Edge Sin soporte NoFirefox Soporte completo 66IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Soporte completo 69Edge Mobile Sin soporte NoFirefox Android Soporte completo 66Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Experimental. Esperar que el comportamiento cambie en el futuro.
Experimental. Esperar que el comportamiento cambie en el futuro.
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.

Mira también

Etiquetas y colaboradores del documento

Colaboradores en esta página: teffcode
Última actualización por: teffcode,