CSS: Márgenes

Los márgenes se controlan con la propiedad margin, y es la distancia entre el borde de la caja y los elementos que la rodean.

CSS define cuatro propiedades para controlar cada uno de los márgenes horizontales y verticales de un elemento:

margin-top
margin-rigth
margin-bottom
margin-left
margin-superior
margin-derecho
margin-inferior
margin-izquierdo
Descripción Establece cada uno de los márgenes horizontales y verticales de un elemento
valores <medida> | <porcentaje> | auto | inherit
Se aplica a Todos los elementos, salvo margin-top y margin-bottom que sólo se aplican a los elementos de bloque y a las imágenes
Valor inicial 0

Las unidades más utilizadas para indicar los márgenes de un elemento son:
a) píxeles (cuando se requiere una precisión total)
b) em (para hacer diseños que mantengan las proporciones)
c) porcentajes (para hacer diseños líquidos o fluidos).

Los márgenes verticales (margin-top y margin-bottom) sólo se pueden aplicar a los elementos de bloque y las imágenes, mientras que los márgenes laterales (margin-left y margin-right) se pueden aplicar a cualquier elemento.

Simplificar márgenes en una sola linea CSS

Además de las cuatro propiedades que controlan cada uno de los márgenes del elemento, CSS define una propiedad que permite establecer los cuatro márgenes de forma directa empleando una única propiedad (margin).

Para ello se indican los valores en el mismo orden que las agujas del reloj (arriba, derecha, abajo, izquierda). Los dos códigos siguientes son equivalentes:

margin-top: 5px; margin-right: 10px; margin-left: 7px; margin-bottom: 6px;

margin: 5px 10px 6px 7px;

Ota manera de simplificar aún más el código es especificar únicamente 2 medidas: una corresponderá a los márgenes superior e inferior y la otra a los laterales.

Supónganse unos márgenes superiores e inferiores de 10px y unos laterales de 20px:

margin: 10px 20px;


REFERENCIA

CSS

SELECTORES

COLORES

BOX MODEL

FONDOS

POSICIONAMIENTO

VISUALIZACIÓN

TIPOGRAFÍA

TEXTO

ENLACES

IMÁGENES

LISTAS

TABLAS

FORMULARIOS

LAYOUT

Ejercicios

ANEXO