A propriedade CSS padding-inline-start

Página anterior padding-inline-end
Próxima página padding-left

Definição e uso

do elemento padding-inline-start A propriedade se refere ao espaço entre a borda e o conteúdo na posição inicial da direção inline.

CSS padding-inline e padding-block propriedades são equivalentes às propriedades CSS padding-top,padding-bottom,padding-left e padding-right São muito semelhantes, mas padding-inline e padding-block A propriedade depende da direção inline e da direção de bloco.

Atenção:propriedades CSS relacionadas writing-mode e direction Define a direção inline. Isso afeta a posição inicial e final do elemento na direção inline, bem como padding-inline-start O resultado da propriedade. Para páginas em inglês, a direção de bloco é para baixo e a direção inline é de esquerda para direita.

Exemplo

Exemplo 1

Defina o preenchimento inicial na direção inline:

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

Experimente você mesmo

Exemplo 2

Defina a propriedade writing-mode Quando o valor da propriedade é vertical-rl, a direção inline é para baixo. O resultado é que a posição inicial do elemento se move da esquerda para o topo:

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

Experimente você mesmo

Exemplo 3

Defina a propriedade direction Quando o valor da propriedade é rtl, a direção inline é de direita para esquerda. O resultado é que a posição inicial do elemento se move da esquerda para a direita:

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

Experimente você mesmo

Sintaxe do CSS

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

Valor da propriedade

Valor	Descrição
auto	Padrão. A distância padrão de padding-inline-start do elemento.
length	Especifique a distância em unidades como px, pt, cm, etc. Não é permitido usar valores negativos. Veja:Unidades CSS.
%	Especifique a distância em porcentagem em relação ao tamanho do elemento pai na direção inline.
initial	Defina essa propriedade para seu valor padrão. Veja initial.
inherit	Herda essa propriedade do elemento pai. Veja inherit.

Detalhes técnicos

Valor padrão:	auto
Herança:	Não
Produção de animação:	Suportado. Veja:Propriedades relacionadas a animação.
Versão:	CSS3
Sintaxe do JavaScript:	object.style.paddingInlineStart="100px"