Atributo padding de Style

Definición y uso

Relleno Atributo que configura o devuelve el relleno interno del elemento.

Esta propiedad puede tomar de uno a cuatro valores:

Atributo de margen Y Propiedad padding Todas se insertan espacio alrededor del elemento. Sin embargo, la diferencia radica en que el margen inserta espacio alrededor del borde, mientras que el relleno inserta espacio dentro del borde del elemento.

  • Un valor, por ejemplo: div {padding: 50px} - Todas las cuatro márgenes tendrán un relleno de 50px
  • Dos valores, por ejemplo: div {padding: 50px 10px} - La espaciación superior e inferior será de 50px, y la espaciación lateral de 10px
  • Tres valores, por ejemplo: div {padding: 50px 10px 20px} - El margen interno superior es de 50px, los márgenes internos derecho e izquierdo son de 10px, y el margen interno inferior es de 20px
  • Cuatro valores, por ejemplo: div {padding: 50px 10px 20px 30px} - El margen interno superior es de 50px, el margen interno derecho es de 10px, el margen interno inferior es de 20px, y el margen interno izquierdo es de 30px

Vea también：

Tutoriales de CSS：Márgenes internos de CSS

Manual de referencia de CSS：Propiedad padding

Ejemplo

Ejemplo 1

Establecer el margen interno del elemento <div>：

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

Pruebe usted mismo

Ejemplo 2

Cambiar el margen interno de todos los cuatro lados del elemento <div> a "25px":

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

Pruebe usted mismo

Ejemplo 3

Devolver el margen interno del elemento <div>：

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

Pruebe usted mismo

Ejemplo 4

Diferencia entre la propiedad margin y padding：

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

Pruebe usted mismo

Sintaxis

Devolver la propiedad padding：

object.style.padding

Establecer la propiedad padding：

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

Valor del atributo

Valor Descripción
% Definir el margen interno en porcentaje del ancho del elemento padre.
length Definir el margen interno con unidades de longitud.
initial Establezca este atributo en su valor predeterminado. Consulte initial。
inherit Hereda este atributo del elemento padre. Consulte inherit。

Detalles técnicos

Valor predeterminado： 0
Valor devuelto： Cadena de caracteres, que representa el margen interno del elemento.
Versión de CSS： CSS1

Navegador compatible

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte