Propriedade padding do Style

Definição e uso

padding A propriedade define ou retorna o espaçamento interno do elemento.

Esta propriedade pode aceitar de um a quatro valores:

A propriedade margin e Propriedade padding São todos inseridos espaço ao redor do elemento. No entanto, a diferença está em que o margin insere espaço ao redor da borda, enquanto o padding insere espaço dentro da borda do elemento.

  • Um valor, por exemplo: div {padding: 50px} - todas as quatro laterais terão uma margem interna de 50px
  • Dois valores, por exemplo: div {padding: 50px 10px} - a margem superior e inferior será de 50px, e a margem esquerda e direita será de 10px
  • Três valores, por exemplo: div {padding: 50px 10px 20px} - o preenchimento interno superior é de 50px, o preenchimento interno direito e esquerdo é de 10px, e o preenchimento interno inferior é de 20px
  • Quatro valores, por exemplo: div {padding: 50px 10px 20px 30px} - o preenchimento interno superior é de 50px, o preenchimento interno direito é de 10px, o preenchimento interno inferior é de 20px, e o preenchimento interno esquerdo é de 30px

Veja também:

Tutorial CSS:Margem interna do CSS

Manual de referência CSS:Propriedade padding

Exemplo

Exemplo 1

Defina o preenchimento interno do elemento <div>:

document.getElementById("myDiv").style.padding = "50px 10px 20px 30px";

Experimente você mesmo

Exemplo 2

Altere o preenchimento interno de todos os quatro lados do elemento <div> para "25px":

document.getElementById("myDiv").style.padding = "25px";

Experimente você mesmo

Exemplo 3

Retorne o preenchimento interno do elemento <div>:

alert(document.getElementById("myDiv").style.padding);

Experimente você mesmo

Exemplo 4

Diferença entre a propriedade margin e padding:

function changeMargin() {
  document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
  document.getElementById("myDiv2").style.padding = "100px";
}

Experimente você mesmo

Sintaxe

Retorne a propriedade padding:

object.style.padding

Defina a propriedade padding:

object.style.padding = "%|length|initial|inherit"

Valor da propriedade

Valor Descrição
% Defina o preenchimento interno como uma porcentagem da largura do elemento pai.
length Defina o preenchimento interno com unidade de comprimento.
initial Defina essa propriedade como seu valor padrão. Veja initial.
inherit Herda essa propriedade do elemento pai. Veja inherit.

Detalhes técnicos

Valor padrão: 0
Retorno: Cadeia de caracteres, que representa o preenchimento interno do elemento.
Versão do CSS： CSS1

Navegador suporta

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte