padding-inline

Experimental

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 (en-US), y padding-left (en-US) 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 inicial	`0`
Applies to	all elements
Heredable	no
Percentages	logical-width of containing block
Valor calculado	as `length`
Animation type	discrete

Sintaxis

Valores

La propiedad padding-inline toma los mismos valores de la propiedad padding-left (en-US).

Sintaxis formal

<'padding-left'> (en-US){ (en-US)1,2} (en-US)

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

BCD tables only load in the browser

Mira también

Las propiedades físicas mapeadas: padding-top, padding-right (en-US), padding-bottom, y padding-left (en-US)
writing-mode, direction, text-orientation