Estás leyendo la versión en inglés del artículo porque aún no existe una traducción para este idioma. ¡Ayúdanos a traducir este artículo!
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 inicial | 0 |
---|---|
Applies to | all elements |
Heredable | no |
Percentages | logical-width of containing block |
Media | visual |
Valor calculado | as length |
Animation type | discrete |
Canonical order | el orden único no-ambigüo definido por la gramática formal |
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
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
padding-inline | Chrome Soporte completo 69 | Edge Sin soporte No | Firefox Soporte completo 66 | IE Sin soporte No | Opera Soporte completo 56 | Safari Sin soporte No | WebView Android Soporte completo 69 | Chrome Android Soporte completo 69 | Firefox Android Soporte completo 66 | Opera Android Soporte completo 48 | Safari iOS Sin soporte No | Samsung Internet Android Sin soporte No |
Leyenda
- Soporte completo
- Soporte completo
- Sin soporte
- Sin soporte
Mira también
- Las propiedades físicas mapeadas:
padding-top
,padding-right
,padding-bottom
, ypadding-left
writing-mode
,direction
,text-orientation