padding-inline

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.

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

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

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

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

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

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