Propriedade CSS padding-inline

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

Definição e uso

do elemento padding-inline refere-se ao espaço entre a borda e o conteúdo na direção inline. É uma abreviação dos seguintes atributos:

padding-inline Os valores do atributo podem ser configurados de diferentes maneiras:

Se o atributo padding-inline tiver dois valores:

padding-inline: 10px 50px;

A margem interna do extremo inicial é de 10px
A margem interna do extremo final é de 50px

Se a propriedade 'padding-inline' tiver um valor:

padding-inline: 10px;

A margem interna inicial e final são 10px

CSS padding-inline e padding-block propriedades são equivalentes às propriedades CSS padding-top,padding-bottom,padding-left e padding-right É muito semelhante, 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 de início e fim do elemento na direção inline, bem como padding-inline 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 a margem interna nos dois lados da direção inline:

div {
  padding-inline: 50px;
}

Experimente você mesmo

Exemplo 2

Quando o elemento <div> tem writing-mode Quando o valor da propriedade 'writing-mode' é 'vertical-rl', a direção inline é para baixo. O resultado é que o início do elemento se moveu para o topo e o fim para o fundo:

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

Experimente você mesmo

Exemplo 3

Quando o elemento <div> tem direction Quando o valor da propriedade 'direction' é 'rtl', a direção inline é de direita para esquerda. O resultado é que o início do elemento se moveu para a direita e o fim para a esquerda:

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

Experimente você mesmo

Sintaxe do CSS

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

Valor da propriedade

Valor	Descrição
auto	Padrão. A distância padrão de padding-inline do elemento.
length	Especifique a distância em unidade como px, pt, cm, etc. Não são permitidos valores negativos. Veja:Unidades CSS.
%	Especifique a distância como um percentual do 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.paddingInline="100px 20px"