Atributo CSS padding-inline

Página anterior padding-bottom
Página siguiente padding-inline-end

Definición y uso

Del elemento padding-inline Se refiere al espacio desde el borde hasta el contenido en la dirección de alineación interna. Es un atributo abreviado de los siguientes atributos:

padding-inline El valor del atributo se puede configurar de diferentes maneras:

Si el atributo padding-inline tiene dos valores:

padding-inline: 10px 50px;

El margen interno del extremo inicial es de 10px
El margen interno del extremo final es de 50px

Si el atributo 'padding-inline' tiene un valor:

padding-inline: 10px;

El relleno inicial y final del extremo son de 10px

CSS padding-inline y padding-block propiedades son equivalentes a las propiedades CSS padding-top,padding-bottom,padding-left y padding-right Muy similar, pero padding-inline y padding-block El atributo depende de la dirección en línea y la dirección de bloque.

Nota:propiedades CSS relacionadas writing-mode y direction Define la dirección en línea. Esto afecta la posición inicial y final del elemento en la dirección en línea, así como padding-inline El resultado del atributo. Para las páginas en inglés, la dirección de bloque es hacia abajo y la dirección en línea es de izquierda a derecha.

Ejemplo

Ejemplo 1

Establezca el relleno en línea en ambos lados de la dirección en línea:

div {
  padding-inline: 50px;
}

Intente hacerlo usted mismo

Ejemplo 2

Cuando el atributo writing-mode Cuando el valor del atributo 'writing-mode' se establece en 'vertical-rl', la dirección en línea es hacia abajo. El resultado es que el extremo inicial del elemento se mueve a la izquierda y el extremo final se mueve a la derecha:

div {
  writing-mode: vertical-rl;
  padding-inline: 10px 100px;
}

Intente hacerlo usted mismo

Ejemplo 3

Cuando el atributo direction Cuando el valor del atributo 'direction' se establece en 'rtl', la dirección en línea es de derecha a izquierda. El resultado es que el extremo inicial del elemento se mueve a la izquierda y el extremo final se mueve a la derecha:

div {
  direction: rtl;
  padding-inline: 10px 100px;
}

Intente hacerlo usted mismo

Sintaxis de CSS

padding-inline: auto|value|initial|inherit;

Valor del atributo

Valor	Descripción
auto	Predeterminado. La distancia predeterminada de padding-inline del elemento.
length	Especifique la distancia en px, pt, cm, etc. No se permiten valores negativos. Consulte:Unidades CSS.
%	Especifique la distancia en porcentaje del tamaño en línea del elemento padre.
initial	Establezca este atributo en su valor predeterminado. Consulte initial.
inherit	Hereda este atributo del elemento padre. Consulte inherit.

Detalles técnicos

Valor predeterminado:	auto
Herencia:	No
Producción de animación:	Admite. Consulte:Atributos relacionados con la animación.
Versión:	CSS3
Sintaxis de JavaScript:	object.style.paddingInline="100px 20px"