Modelo de cuadro: Margen interno de CSS

El margen interno de los elementos está entre el borde y la zona de contenido. La propiedad más simple para controlar esta área es la propiedad padding.

La propiedad de margen interno en CSS define el espacio en blanco entre el borde y el contenido de un elemento. La propiedad de margen interno acepta valores de longitud o porcentajes, pero no permite valores negativos.

Atributo de margen padding CSS

La propiedad de margen interno en CSS define el espacio en blanco entre el borde y el contenido de un elemento. La propiedad de margen interno acepta valores de longitud o porcentajes, pero no permite valores negativos.

Por ejemplo, si desea que todos los elementos h1 tengan un margen interno de 10 píxeles en todos los lados, simplemente debe hacerlo así:

h1 {padding: 10px;}

También se puede establecer el margen interno de cada lado en el orden superior, derecho, inferior e izquierdo, y cada lado puede usar diferentes unidades o valores porcentuales:

h1 {padding: 10px 0.25em 2ex 20%;}

Propiedades de margen interno unilaterales

También se pueden establecer los márgenes superior, derecho, inferior e izquierdo utilizando las siguientes cuatro propiedades individuales:

Puede que ya se haya dado cuenta, pero las siguientes reglas tienen el mismo efecto que las reglas abreviadas anteriores:

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

Valores porcentuales de margen interno

Como se mencionó anteriormente, se puede establecer un valor porcentual para el margen interno de un elemento. El valor porcentual se calcula en función del ancho del elemento padre, al igual que con los márgenes. Por lo tanto, si cambia el ancho del elemento padre, también cambiarán.

La siguiente regla establece el margen interno del párrafo al 10% del ancho del elemento padre:

p {padding: 10%;}

Por ejemplo: si el elemento padre de un párrafo es un elemento div, entonces su margen interno debe calcularse en función del ancho del div.

<div style="width: 200px;">
<p>Este párrafo se encuentra dentro de un DIV que tiene un ancho de 200 píxeles.</p>
</div>

Nota:Los márgenes superior e inferior son iguales a los laterales; es decir, los porcentajes de los márgenes superior e inferior se establecen en función del ancho del elemento padre, no en función de la altura.

Ejemplo de margen interno en CSS:

Todas las propiedades de margen interno en una declaración
Este ejemplo muestra cómo usar propiedades abreviadas para establecer todas las propiedades de margen interno en una declaración, que puede tener de uno a cuatro valores.
Establecer margen inferior interno 1
Este ejemplo muestra cómo usar valores en centímetros para establecer el margen inferior interno de una celda.
Establecer margen inferior interno 2
Este ejemplo muestra cómo usar porcentajes para establecer el margen inferior interno de una celda.
Establecer margen izquierdo interno 1
Este ejemplo muestra cómo usar valores en centímetros para establecer el margen izquierdo interno de una celda.
Establecer margen izquierdo interno 2
Este ejemplo muestra cómo usar porcentajes para establecer el margen izquierdo interno de una celda.
Establecer margen derecho 1
Este ejemplo muestra cómo establecer el margen derecho interno de la celda utilizando un valor en centímetros.
Establecer margen derecho 2
Este ejemplo muestra cómo establecer el margen derecho interno de la celda utilizando un porcentaje.
Establecer margen superior 1
Este ejemplo muestra cómo establecer el margen superior interno de la celda utilizando un valor en centímetros.
Establecer margen superior 2
Este ejemplo muestra cómo establecer el margen superior interno de la celda utilizando un porcentaje.

Atributo de margen interno CSS

Atributo Descripción
padding Atributo de abreviatura. Actúa para establecer las propiedades de margen interno del elemento en una declaración.
padding-bottom Establecer el margen inferior interno del elemento.
padding-left Establecer el margen izquierdo interno del elemento.
padding-right Establecer el margen derecho interno del elemento.
padding-top Establecer el margen superior interno del elemento.