Propiedad "margin" en CSS

En CSS, la propiedad margin se utiliza para controlar el espacio alrededor de un elemento. Es una forma de agregar espacio exterior alrededor de un elemento, lo que afecta el espacio entre ese elemento y los elementos adyacentes.

¿Qué es la propiedad "margin"?

La propiedad margin en CSS define el espacio en blanco que rodea un elemento, tanto en el interior como en el exterior de su borde. Se puede aplicar a los cuatro lados de un elemento (arriba, derecha, abajo, izquierda) o de forma individual.

Ejemplo de Uso

Veamos un ejemplo de cómo se utiliza la propiedad margin en CSS:

<div class="caja">
  Esto es una caja con margen.
</div>
  

Y el CSS correspondiente:

.caja {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  margin: 20px;
  border: 2px solid #333;
}

En este ejemplo, hemos creado una caja con la clase .caja y le hemos aplicado un margen de 20px en todos los lados. Esto significa que hay un espacio de 20px alrededor de la caja, entre la caja y otros elementos adyacentes.

Valores de la Propiedad "margin"

La propiedad margin puede tener varios valores:

• margin: 10px; - Todos los lados tienen un margen de 10px.
• margin: 10px 20px; - El margen superior e inferior es de 10px, y el margen izquierdo y derecho es de 20px.
• margin: 10px 20px 30px; - El margen superior es de 10px, el margen izquierdo y derecho es de 20px, y el margen inferior es de 30px.
• margin: 10px 20px 30px 40px; - El margen superior es de 10px, el margen derecho es de 20px, el margen inferior es de 30px, y el margen izquierdo es de 40px.