Propiedad margin en CSS, (Introducción a CSS)

propiedad margin en css La propiedad margin del CSS establece la anchura de algunos o todos los márgenes de los elementos HTML. La propiedad margin Se aplica en todos los elementos.

Lo valores permitidos de la propiedad margin son: medida, porcentaje, auto, inherit

Es importante mencionar que si utilizamos porcentaje como unidad de medida, el margen hara referencia al ancho del elemento en el que se encuentra.


Propiedad margin, ejemplos de uso

Si se quiere establecer el mismo valor para todos los márgenes de un elemento, se podría utilizar la siguiente regla CSS:

div {
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}

Utilizando la propiedad margin, es posible establecer de forma abreviada el mismo valor a todos los márgenes de un elemento:

div {
  margin: 10px;
}

La propiedad margin es tan poderosa que permite establecer uno, dos, tres o los cuatro márgenes de forma simultánea.

Si se indican dos valores, el primero hace referencia a los márgenes verticales y el segundo es el valor de los márgenes horizontales, de modo que las siguientes reglas CSS son equivalentes:

div {
  margin: 10px 20px;
}
 
div {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
}

Si se indican tres valores, el primero hace referencia al margen superior, el segundo es el valor de los márgenes horizontales y el tercero es el margen inferior, de modo que las siguientes reglas CSS son equivalentes:

div {
  margin: 10px 20px 30px;
}
 
div {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 20px;
}

Por último, si se indican cuatro valores, el primero es el margen superior, el segundo es el margen derecho, el tercero es el margen inferior y el cuarto es el margen izquierdo, de modo que las siguientes reglas CSS son equivalentes:

div {
  margin: 10px 20px 30px 40px;
}
 
div {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

El uso de propiedades como margin no sólo hace más breve el código CSS, sino que demuestra que se tienen conocimientos avanzados de CSS. Información mas detalla pueden leer los siguientes enlaces:

Propiedad margin referencia CSS 2.1

Margen y relleno

Suscribir
Notificar a
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios