Margen (margin)
Es la separación opcional existente entre la caja y el resto de cajas adyacentes. Las unidades más utilizadas para indicar los márgenes de un elemento son los píxeles (cuando se requiere una precisión total), los em (para hacer diseños que mantengan las proporciones) y los porcentajes (para hacer diseños líquidos o fluidos). Hay cuatro propiedades en CSS para controlar cada uno de los márgenes:
- margin-top (margen superior)
- margin-right (margen derecho)
- margin-bottom (margen inferior)
- margin-left (margen izquierdo)
Además de estas cuatro propiedades que controlan los márgenes, se puede definir los cuatros márgenes en forma simultánea mediante la propiedad margin. Donde el primer valor establece el margen superior, el segundo el margen derecho, el tercero el inferior y el cuarto el izquierdo.
El ancho y el alto de un elemento no solamente se calculan teniendo en cuenta sus propiedades width y height. El margen, el relleno y los bordes establecidos a un elemento determinan el ancho y el alto final del elemento.
Calculo del ancho.
Calculo de la altura.
El ancho total se calcula de la siguiente manera:
|
Total Ancho: ancho del elemento de bloque de contenido + padding-left + padding-right + border-left + border-right + margin-left + margin-right |
A continuación mostraremos un ejemplo:
|
El ancho total sería: 300px + 50 px+ 50 px+ 30 px+ 30 px+ 10px + 10 px = 480 pixeles |
Las propiedades de tipo "shorthand" (propiedades abreviadas) son propiedades de CSS que permiten establecer de forma simultánea el valor de varias propiedades diferentes pero relacionadas. El uso de las propiedades "shorthand" es muy extendido, ya que permiten crear hojas de estilos más compactas.
Algunas propiedades shorthand son: font, background y las vistas anteriormente: margin ,border y padding.