Atributo CSS padding-inline-start

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

Definición y uso

del elemento padding-inline-start propiedades se refieren al espacio desde el borde al contenido en el punto de inicio en la dirección en línea.

CSS padding-inline y padding-block propiedades se refieren a las propiedades CSS padding-top,padding-bottom,padding-left y padding-right Son muy similares, 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 de inicio y final del elemento en la dirección en línea, así como padding-inline-start 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 el inicio de la dirección en línea:

div {
  padding-inline-start: 50px;
}

Pruebe usted mismo

Ejemplo 2

Establezca el atributo writing-mode Cuando el valor del atributo se establece en vertical-rl, la dirección en línea es hacia abajo. El resultado es que la posición de inicio del elemento se mueve desde la izquierda a la parte superior:

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

Pruebe usted mismo

Ejemplo 3

Establezca el atributo direction Cuando el valor del atributo se establece en rtl, la dirección en línea es de derecha a izquierda. El resultado es que la posición de inicio del elemento se mueve desde la izquierda a la derecha:

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

Pruebe usted mismo

Sintaxis de CSS

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

Valor del atributo

Valor	Descripción
auto	Predeterminado. La distancia predeterminada de padding-inline-start del elemento.
length	Especifique la distancia en px, pt, cm, etc. No se permite el uso de valores negativos. Consulte:Unidades CSS.
%	Especifique la distancia en porcentaje de la dimensión en la dirección en línea con respecto al elemento padre.
initial	Establezca este atributo en su valor predeterminado. Vea: initial.
inherit	Hereda este atributo de su elemento padre. Vea: 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.paddingInlineStart="100px"