Atributo padding de CSS

Definición y uso

La propiedad abreviada márgen establece todas las propiedades de márgen interno en una declaración.

Explicación

Esta propiedad abreviada establece el ancho de todos los márgenes internos del elemento o el ancho de los márgenes internos de cada lado. El margen interno establecido en elementos en línea no sustituyentes no afecta el cálculo de la altura de la línea; por lo tanto, si un elemento tiene tanto margen interno como fondo, puede extenderse visualmente a otras líneas y puede solaparse con otros contenido. El fondo del elemento se extiende a través del margen interno. No se permite especificar valores negativos de margen.

Nota:No se permite el uso de valores negativos.

Ejemplo 1

márgen:10px 5px 15px 20px;
  • El margen superior es de 10px
  • El margen derecho es de 5px
  • El margen inferior es de 15px
  • El margen izquierdo es de 20px

Ejemplo 2

márgen:10px 5px 15px;
  • El margen superior es de 10px
  • El margen derecho e izquierdo son de 5px
  • El margen inferior es de 15px

Ejemplo 3

márgen:10px 5px;
  • El margen superior e inferior son de 10px
  • El margen derecho e izquierdo son de 5px

Ejemplo 4

márgen:10px;
  • Todos los 4 márgenes internos son de 10px

Véase también:

Tutoriales de CSS:Márgen interno de CSS

Manual de referencia del DOM HTML:Atributo márgen

Ejemplo

Establecer los 4 márgenes internos del elemento p:

p
  {
  márgen:2cm 4cm 3cm 4cm;
  }

Prueba por ti mismo

Sintaxis de CSS

márgen: length|initial|inherit;

Valor del atributo

Valor Descripción
auto El navegador calcula el margen interno.
length Se especifica el valor del margen interno en unidades específicas, como píxeles, centímetros, etc. El valor predeterminado es 0px.
% Se especifica el margen interno en porcentajes de la anchura del elemento padre.
inherit Se debe heredar el margen interno del elemento padre.

Detalles técnicos

Valor predeterminado: 0
Herencia: no
Versión: CSS1
Sintaxis de JavaScript: object.style.padding="10px 5px"

Ejemplo TIY

Todas las propiedades de márgen interno en una declaración
Este ejemplo muestra cómo usar la propiedad abreviada para establecer todas las propiedades de márgen interno en una declaración, que puede tener de uno a cuatro valores.

Compatibilidad del navegador

Los números en la tabla indican la primera versión del navegador que admite completamente esta propiedad.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5