18-Márgenes en CSS: Espaciado con Precisión 📏

---

Márgenes en CSS

• Margen - Lados individuales
• Margen - Propiedad de mano corta
• El valor automotriz
• El valor heredado
• Colapso de márgenes

---

Margen - Lados individuales

En CSS, los márgenes se pueden aplicar de manera individual a cada lado de un elemento. Puedes usar las propiedades margin-top, margin-right, margin-bottom y margin-left para controlar los márgenes en cada lado del elemento. Esto te da un control total sobre los espacios exteriores, permitiéndote ajustar cada lado de manera independiente.

Las propiedades del margen pueden tener los siguientes valores:

• auto - El navegador calcula automáticamente el margen.
• longitud - Especifica un margen en unidades como px, pt, cm, etc.
• % - Especifica un margen como un porcentaje de la anchura del elemento contenedor.
• inherit - Especifica que el margen debe heredarse del elemento padre.

Consejo: Los márgenes también pueden tener valores negativos, lo que puede ser útil en algunos casos para ajustar el espacio de manera más precisa.

Ejemplo de márgenes individuales aplicados a este cuadro:

Este cuadro tiene un margen de:

• margin-top: 20px;
• margin-right: 40px;
• margin-bottom: 30px;
• margin-left: 10px;

Nota cómo el espacio alrededor del cuadro cambia según el valor de cada margen individual.

---

Margen - Propiedad de mano corta

La propiedad margin es una propiedad abreviada (de mano corta) que te permite establecer los márgenes en los cuatro lados de un elemento en una sola declaración. Esta propiedad es útil para acortar el código y simplificar la definición de los márgenes.

El margin permite los siguientes valores de margen en orden: margin: top right bottom left;. Los valores se aplican de la siguiente manera:

• Si se especifican cuatro valores (por ejemplo, margin: 25px 50px 75px 100px;):
  • El margen superior es de 25px
  • El margen derecho es de 50px
  • El margen inferior es de 75px
  • El margen izquierdo es de 100px
• Si se especifican tres valores (por ejemplo, margin: 25px 50px 75px;): el valor superior se aplica al margen superior, el segundo valor a los márgenes derecho e izquierdo, y el tercero al margen inferior.
• Si se especifican dos valores (por ejemplo, margin: 25px 50px;): el primer valor se aplica a los márgenes superior e inferior, y el segundo valor a los márgenes derecho e izquierdo.
• Si se especifica un solo valor (por ejemplo, margin: 25px;): se aplica el mismo margen a los cuatro lados.

Ejemplo de la propiedad abreviada margin:

margin: 25px 50px 75px 100px;

Margen superior: 25px, derecho: 50px, inferior: 75px, izquierdo: 100px.

margin: 25px 50px 75px;

Superior: 25px, derecho/izquierdo: 50px, inferior: 75px.

margin: 25px 50px;

Superior/inferior: 25px, derecho/izquierdo: 50px.

margin: 25px;

Todos los lados: 25px.

---

El valor automotriz

El valor auto para los márgenes en CSS permite que el navegador calcule automáticamente el valor adecuado para los márgenes. Este valor se utiliza comúnmente en la propiedad margin para centrar un bloque horizontalmente dentro de su contenedor, como en el caso de los elementos con un ancho fijo. En este caso, el navegador distribuye los márgenes izquierdo y derecho por igual, centrándolos.

---

El valor heredado

El valor inherit se utiliza para hacer que un elemento herede el valor de margen de su elemento padre. Esto puede ser útil cuando se quiere mantener una coherencia en el espaciado entre varios elementos dentro de un contenedor, asegurando que todos sigan las mismas reglas de margen. Al usar inherit, el margen se ajusta automáticamente según el estilo de su contenedor.

---

Colapso de márgenes

El colapso de márgenes ocurre cuando los márgenes de dos elementos adyacentes se combinan en un solo margen. Esto sucede, por ejemplo, cuando un elemento tiene un margen inferior y el siguiente tiene un margen superior. En lugar de que los márgenes se sumen, el navegador solo aplicará el margen mayor. Este comportamiento es común en elementos de bloque y puede ser controlado con la propiedad margin-collapse en ciertos casos.

---

Todas las propriedades de Margin

Propiedades de Márgenes en CSS

Propiedad	Descripción	Valores	Ejemplo
margin	Propiedad abreviada para definir todos los lados.	auto, longitud (px, pt, %, etc.), hereda	margin: 20px 10px 15px 5px;
margin-top	Define el margen superior del elemento.	auto, longitud (px, pt, %, etc.), hereda	margin-top: 10px;
margin-right	Define el margen derecho del elemento.	auto, longitud (px, pt, %, etc.), hereda	margin-right: 15px;
margin-bottom	Define el margen inferior del elemento.	auto, longitud (px, pt, %, etc.), hereda	margin-bottom: 20px;
margin-left	Define el margen izquierdo del elemento.	auto, longitud (px, pt, %, etc.), hereda	margin-left: 25px;
auto	El navegador calcula automáticamente el margen.	Aplicable en margin y sus variantes.	margin: auto;
inherit	El elemento hereda el margen del elemento padre.	Aplicable en margin y sus variantes.	margin: inherit;
Negativos	Los márgenes pueden tener valores negativos para reducir espacio.	Cualquier valor negativo en px, pt, etc.	margin-left: -10px;

---

Ir al índice

---