[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/es/docs/Web/CSS/Reference/Properties/padding-inline [Back]  [Original]

padding-inline - CSS | MDN

Esta pgina ha sido traducida del ingls por la comunidad. Aprende ms y nete a la comunidad de MDN Web Docs.

View in English Always switch to English

padding-inline

Baseline Widely available

This feature is well established and works across many devices and browser versions. Its been available across browsers since abril de 2021.

Experimental: Esta es una tecnologa experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en produccin.

La propiedad de CSS padding-inline define el relleno en lnea lgico de inicio y final de un elemento, que asigna las propiedades de relleno fsicas dependiendo del modo de escritura del elemento, direccionalidad, y orientacin del texto.

css
/* <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 direccin bloque es padding-block que establece padding-block-start, y padding-block-end.

Valor inicialas each of the properties of the shorthand:
Applies toall elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
Heredableno
Percentageslogical-width of containing block
Valor calculadoas each of the properties of the shorthand:
Animation typea length

In this article

Sintaxis

Valores

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

Sintaxis formal

padding-inline = 
<'padding-top'>{1,2}

<padding-top> =
<length-percentage [0,]>

<length-percentage> =
<length> |
<percentage>
Esta sintaxis refleja el estndar ms reciente segn CSS Box Model Module Level 4, CSS Logical Properties and Values Module Level 1, CSS Values and Units Module Level 4. Es posible que no todos los navegadores hayan implementado todas las partes. Consulte Compatibilidad del navegador para obtener informacin de soporte.

Ejemplo

Contenido HTML

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

Contenido CSS

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

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

Especificaciones

Specification
CSS Logical Properties and Values Module Level 1
# propdef-padding-inline

Compatibilidad con navegadores

Mira tambin


Web Proxy Viewer  |  New URL  |  Original Page