padding-inline

This translation is incomplete. Please help translate this article from English

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

 

La propiedad de CSS  padding-inline define el relleno en línea lógico de inicio y final de un elemento, que asigna las propiedades de relleno físicas dependiendo del modo de escritura del elemento, direccionalidad, y orientación del texto.

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

/* Keyword values */
padding-inline: auto;

/* Global values */
padding-inline: inherit;
padding-inline: initial;
padding-inline: unset;

Estos valores corresponden a las propiedadespadding-top y  padding-bottom, o  padding-right, y padding-left dependiendo de los valores definidos writing-mode, direction, y text-orientation.

Los valores pueden ser establecidos individualmente como padding-inline-start y padding-inline-end. La propiedad de la dirección bloque es padding-block que establece padding-block-start, y padding-block-end.

Valor inicial0
Applies toall elements
Heredableno
Percentageslogical-width of containing block
Valor calculadoas length
Animation typediscrete

Sintaxis

Valores

La propiedad padding-inline toma los mismos valores de la propiedad padding-left.

Sintaxis formal

<'padding-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;
  padding-inline: 20px 40px;
  background-color: #c8c800;
}

Especificación

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

Compatibilidad en navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
padding-inlineChrome 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 Soporte completo 79
Deshabilitado
Soporte completo 79
Deshabilitado
Deshabilitado From version 79: this feature is behind the Experimental Web Platform features preference (needs to be set to Enabled).
Firefox Soporte completo 66IE Sin soporte NoOpera Soporte completo 56Safari Sin soporte NoWebView Android Soporte completo 69Chrome Android 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.
Firefox Android Soporte completo 66Opera Android Soporte completo 48Safari iOS Sin soporte NoSamsung Internet Android Soporte completo 10.0

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.

Mira también