Figura: Mis apuntes sobre Márgenes en CSS
| |
|---|
|
|
Mediante las hojas de estilo CSS podemos modificar los márgenes de una página web. Esto hará que nuestro contenido se posicione en un lugar u otro de la página. Lo podremos pegar al borde superior, separarlo de la izquierda,… Todo aquello que necesitemos para darle estilo a la página web.
Definición: En el modelo de cajas, los márgenes (margin) son los espacios exteriores de un elemento. Es decir, el espacio que hay entre el borde de un elemento y su exterior. Entonces, la propiedad CSS margin (margen) tendrá por función, definir el espacio alrededor de los elementos.
Margen CSS define cuatro propiedades para controlar cada uno de los márgenes horizontales y verticales de un elemento; de lo cual es lo que trata esta publicación, donde se compila una vasta información que da forma a un "contenido enciclopédico" muy exhaustivo y profundo sobre los Márgenes en CSS.
IR A PORTAFOLIOCombina los atributos de los pasos anteriores juntos en la etiqueta "<body>" para definir los márgenes. Por ejemplo, para establecer los márgenes de página a 10 píxeles en los laterales y 15 píxeles en la parte superior e inferior, escribe "<body marginwidth='10' marginheight='15'>". Para establecer el margen superior a 5 píxeles, el margen inferior de 10 píxeles, el margen izquierdo en 25 píxeles y el margen derecho en 20 píxeles, escribe "<body topmargin='5' bottommargin='10' leftmargin='25' rightmargin='20'>"..
IR A PORTAFOLIODimensiones de las capas:
El tamaño de las capas en CSS se fija mediante los atributos “width” (ancho) y “height” (alto), empleando para ello cualquiera de las unidades que están permitidas. De no marcarse estas dimensiones, las capas adquieren las dimensiones del contenido. Sin embargo, esto puede verse afectado por la aplicación de tres atributos de las capas: márgenes, relleno y bordes. Una definición ràpida esos conceptos (para su posterior desarrollo detallado posterior) es:- Los márgenes son el espacio que hay entre la capa y cualquier objeto adyacente.
- El borde es la línea que delimita la capa.
- El relleno, es el espacio entre el borde de la capa y el contenido.
IR A PORTAFOLIO
Se expone una explicación pormenorizada, secuenciada, que profundiza este punto álgido para entender y aplicar el atributo margin.
Primeramente, se establece que en el código CSS, el margen se operacionaliza mediante el atributo “margin”, el cual es seguido de un guión (sin dejar espacio) y el lado de la capa al cual se le determina el margen. ¡Enhorabuena! porque a este nivel de desarrollo, se hace imperioso exponer la anatomía intrínseca del margin. ¿Cómo así?. Bueno, que si bien vimos en el ítem anterior que deben cubrirse 4 capas, entonces, el margin se aplica según propiedades concernientes a cada capa o zona del documento. De manera que:Postulado:
Para modificar los márgenes de una página web, se hace menester el empleo de las cuatro propiedades CSS que la rigen, a saber:- Propiedad margin-bottom, para el margen inferior.
- Propiedad margin-left, para el margen izquierdo.
- Propiedad margin-right, para el margen derecho.
- Propiedad margin-top, para el margen superior.
Sintaxis:
En consecuencia, al ser aplicado a alguna sección del documento (imagen o texto), el código CSS quedaría con la anatomía de siguiente forma:
body{
margin-left: 0px;
margin-right: 10px;
margin-top: 0px;
margin-bottom: 10px;
}
/* Equivalente a margin: 0px 10px 0px 10px; */
Sinopsis:
El cuadro adjunto, resume el marco teórico de las propiedades del margin; expone un zoom out introductorio generalizante:
| Propiedades | margin-top, margin-right, margin-bottom, margin-left |
|---|---|
| Valores | unidad de 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 |
| Descripción | Establece cada uno de los márgenes horizontales y verticales de un elemento |
El Margen se puede cambiar en elementos individuales, inferior, izquierdo y derecho. También se puede cambiar una vez que todas las propiedades.
Los valores posibles
| valor | explicación |
|---|---|
| auto | Definir los márgenes del navegador. El resultado dependerá del navegador |
| longitud | Definir un margen fijo (usando el píxel, pt, em, etc.) |
| % | Se define utilizando un margen porcentual |
Nota: El Margen puede utilizar el contenido de solapamiento negativo.
Cada una de las propiedades establece la separación entre el borde lateral de la caja y el resto de cajas adyacentes:
Figura: Las cuatro propiedades relacionadas con los márgenes
| Propiedad | Valor | Significado |
|---|---|---|
margin-top |
auto | |
Define un tamaño de margen superior. |
margin-left |
auto | |
Define un tamaño de margen a la izquierda. |
margin-right |
auto | |
Define un tamaño de margen a la derecha. |
margin-bottom |
auto | |
Define un tamaño de margen inferior. |
Podemos aplicar diferentes márgenes a cada zona de un elemento utilizando cada una de estas propiedades, o dejando al nevegador que lo haga de forma automática indicando el valor auto.
Existe un truco muy sencillo y práctico para centrar horizontalmente un elemento en pantalla. Basta con aplicar un ancho fijo al contenedor: width: 500px (por ejemplo) y luego aplicar un margin: auto. De esta forma, el navegador, al conocer el tamaño del elemento (y por omisión, el resto del tamaño de la ventana) se encarga de repartirlo equitativamente entre el margen izquierdo y el margen derecho, quedando centrado el elemento.
Hay que recordar diferenciar bien un margin de un padding, puesto que no son la misma cosa. Los rellenos (padding) son los espacios que hay entre los bordes del elemento en cuestión y el contenido del elemento (por la parte interior). Mientras que los márgenes (margin) son los espacios que hay entre los bordes del elemento en cuestión y los bordes de otros elementos (parte exterior).
Observese también el siguiente ejemplo para ilustrar el solapamiento de márgenes. Por defecto, si tenemos dos elementos adyacentes con, por ejemplo, margin: 20px cada uno, ese espacio de margen se solapará y tendremos 20px en total, y no 40px (la suma de cada uno) como podríamos pensar en un principio:
La parte en naranja es la que consideramos margin, mientras que la parte en verde es la que consideramos padding.
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).
El siguiente ejemplo añade un margen izquierdo al segundo párrafo:
.destacado {
margin-left: 2em;
}
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam et elit.
Vivamus placerat lorem. Maecenas sapien. Integer ut massa. Cras diam ipsum,
laoreet non, tincidunt a, viverra sed, tortor.</p>
<p class="destacado">Vestibulum lectus diam, luctus vel, venenatis ultrices,
cursus vel, tellus. Etiam placerat erat non sem. Nulla molestie odio non
nisl tincidunt faucibus.</p>
<p>Aliquam euismod sapien eu libero. Ut tempor orci at nulla. Nam in eros
egestas massa vehicula nonummy. Morbi posuere, nibh ultricies consectetuer tincidunt,
risus turpis laoreet elit, ut tincidunt risus sem et nunc.</p>A continuación se muestra el aspecto del ejemplo anterior en cualquier navegador:
Figura: Ejemplo de propiedad margin-left
Algunos diseñadores web utilizan la etiqueta <blockquote> para tabular los contenidos de los párrafos. Se trata de un error grave porque HTML no debe utilizarse para controlar el aspecto de los elementos. CSS es el único responsable de establecer el estilo de los elementos, por lo que en vez de utilizar la etiqueta <blockquote> de HTML, debería utilizarse la propiedad margin-left de CSS.
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, tal y como muestra la siguiente imagen:
Figura; Los márgenes verticales sólo se aplican a los elementos de bloque e imágenes
La imagen anterior muestra el resultado de aplicar los mismos márgenes a varios enlaces (elementos en línea) y varios párrafos (elementos de bloque). En los elementos en línea los márgenes verticales no tienen ningún efecto, por lo que los enlaces no muestran ninguna separación vertical, al contrario de lo que sucede con los párrafos. Sin embargo, los márgenes laterales funcionan sobre cualquier tipo de elemento, por lo que los enlaces se muestran separados entre sí y los párrafos aumentan su separación con los bordes laterales de su elemento contenedor.
Además de las cuatro propiedades que controlan cada uno de los márgenes del elemento, CSS define una propiedad especial que permite establecer los cuatro márgenes de forma simultánea. Estas propiedades especiales se denominan "propiedades shorthand" y CSS define varias propiedades de este tipo; ésto, lo detallo en una publicación aparte.
IR A PORTAFOLIO
Postulado:
La propiedad que permite definir de forma simultánea los cuatro márgenes se denomina margin.
Se trata de una abreviación para evitar tener que establecer cada lado por separado con las otras propiedades de margen: margin-top , margin-rightt,margin-bottom y margin-left.
Sintaxis
/* Aplica a todos los cuatro lados */
margin: 1em;
/* Vertical | Horizontal */
margin: 5% auto;
/* Arriba | Horizontal | Abajo */
margin: 1em auto 2em;
/* Arriba | Derecha | Abajo | Izquierda */
margin: 2px 1em 0 auto;
/* Valores globales */
margin: inherit;
margin: initial;
margin: unset;
Valores
Acepta uno, dos , tres o cuatro valores de los siguientes:
<length>- Especifica un ancho fijo. Valores negativos son permitidos. Mira
<length>para conocer las posibles unidades. <percentage>- Un
<percentage>relativo al ancho del bloque contenedor. Se permiten valores negativos. autoauto es reemplazado por algún valorapropiado. Por ejemplo, puede usarse para centrar horizontalmente un elemento bloque.
div { width:50%; margin:0 auto; }centrará el div horizontalmente.
- Un único valor aplicará para todos los cuatro lados.
- Dos valores aplicarán: El primer valor para arriba y abajo, el segundo valor para izquierda y derecha.
- Tres valores aplicarán: El primero para arriba, el segundo para izquierda y derecha, el tercero para abajo.
- Cuatro valores aplicarán en sentido de las manecillas del reloj empezando desde arriba. (Arriba, derecha, abajo, izquierda)
Tabla sinóptica:
| Propiedad | margin |
|---|---|
| Valores | ( unidad de medida | porcentaje | auto ) {1, 4} | inherit |
| Se aplica a | Todos los elementos salvo algunos casos especiales de elementos mostrados como tablas |
| Valor inicial | - |
| Descripción | Establece de forma directa todos los márgenes de un elemento |
La notación {1, 4} de la definición anterior significa que la propiedad margin admite entre uno y cuatro valores, y el siguiente significado lo detallo en la seccion propiedad abreviada de esta publicación. CLICK acá para ir a Propiedad Abreviada
El comportamiento de los márgenes verticales es más complejo de lo que se puede imaginar. Cuando se juntan dos o más márgenes verticales, se fusionan de forma automática y la altura del nuevo margen será igual a la altura del margen más alto de los que se han fusionado.
Figura: Fusión automática de los márgenes verticales
De la misma forma, si un elemento está contenido dentro de otro elemento, sus márgenes verticales se fusionan y resultan en un nuevo margen de la misma altura que el mayor margen de los que se han fusionado:
Figura; Fusión de los márgenes de los elementos interiores
Aunque en principio puede parecer un comportamiento extraño, la razón por la que se propuso este mecanismo de fusión automática de márgenes verticales es el de dar uniformidad a las páginas web habituales. En una página con varios párrafos, si no se diera este comportamiento y se estableciera un determinado margen a todos los párrafos, el primer párrafo no mostraría un aspecto homogéneo respecto de los demás.
Figura: Motivo por el que se fusionan automáticamente los márgenes verticales
En el caso de un elemento que se encuentra en el interior de otro y sus márgenes se fusionan de forma automática, se puede evitar este comportamiento añadiendo un pequeño relleno (padding: 1px) o un borde (border: 1px solid transparent) al elemento contenedor.
IR A PORTAFOLIO
Esta propiedad puede tener de uno a cuatro valores. Tal como se verá en los ejemplos que siguen.
Ejemplos:
- 📌 Margen con 4 valores:
Significado: Si se indican los cuatro valores, el orden de asignación es: margen superior, margen derecho, margen inferior y margen izquierdo. Ejemplo: 0.5em 0.5em 0.5em 1em; y el resultado va a ser el siguiente:
- margen superior con valor de 0.5em
- margen derecho con valor de 0.5em
- margen inferior con valor de 0.5em
- margen izquierdo con valor de 1em
El ejemplo anterior de márgenes se puede reescribir utilizando la propiedad
margin:Código CSS original:
divimg { margin-top: .5em; margin-bottom: .5em; margin-left: 1em; margin-right: .5em; }Alternativa directa:
divimg { margin: .5em .5em .5m 1em; }Otra alternativa:
divimg { margin: .5em; margin-left: 1em; }
- 📌 Margen con 3 valores:
Significado: Si se indican tres valores, el primero se asigna al margen superior, el tercero se asigna al margen inferior y el segundo valor se asigna los márgenes izquierdo y derecho. Ejemplo: 1em 0.5em 0.5em; y el resultado va a ser el siguiente:
- margen superior con valor de 1em
- margen derecho con valor de 0.5em
- margen inferior con valor de 0.5em
- margen izquierdo con valor de 0.5em
El ejemplo anterior de márgenes se puede reescribir utilizando la propiedad
margin:Código CSS original:
div img { margin-top: .1em; margin-bottom: .0.5em; margin-left: 0.5em; margin-right: .0.5em; }Alternativa directa:
divimg { margin: 1em 0.5em 0.5em }Otra alternativa:
divimg { margin:0.5em; margin-top: 1em; }
- 📌 Margen con 2 valores:
Significado: Si se indican dos valores, el primero se asigna al margen superior e inferior, y el segundo valor se asigna los márgenes izquierdo y derecho. Ejemplo : 1em 0.5em; y el resultado va a ser el siguiente:
- Márgenes superior e inferior con valor de 1em
- Los márgenes izquierdo y derecho con valor de 0.5em
El ejemplo anterior de márgenes se puede reescribir utilizando la propiedad
margin:Código CSS original:
div img { margin-top: 1em; margin-bottom: 1em; margin-left: 0.5em; margin-right: .0.5em; }Alternativa directa:
divimg { margin: 1em 0.5em }Otra alternativa:
divimg { margin:1em; margin: 0.5em; }
- 📌 Margen con 1 valor:
Significado: Si solo se indica un valor, todos los márgenes tienen ese valor.Ejemplo: 0.5em; y el resultado va a ser el siguiente:
- Todos los cuatro márgenes con un valor de 0.5em
El ejemplo anterior de márgenes se puede reescribir utilizando la propiedad
margin:Código CSS original:
divimg { margin: 0.5em; }Nota: la alternativa directa en este caso, no se modifica respecto a la original.
Más Ejemplos
Ejemplo simple
HTML
<div class="ex1">
margin: auto;
background: gold;
width: 66%;
</div>
<div class="ex2">
margin: 20px 0 0 -20px;
background: gold;
width: 66%;
</div>CSS
.ex1 {
margin: auto;
background: gold;
width: 66%;
}
.ex2 {
margin: 20px 0px 0 -20px;
background: gold;
width: 66%;
}Otro ejemplo
margin: 5%; /* 5% para todos los lados */
margin: 10px; /* 10px para todos los lados */
margin: 1.6em 20px; /* 1.6em arriba y abajo, 20px izquierda y derecha */
margin: 10px 3% 1em; /* 10px arriba, 3% izquierda y derecha, 1em abajo */
margin: 10px 3px 30px 5px; /* 10px arriba, 3px derecha, 30px abajo, 5px izquierda */
margin: 1em auto; /* 1em arriba y abajo, centrado horizontalmente */
margin: auto; /* 0px de margen vertical, centrado horizontalmente */
Centrado horizontal con margin: 0 auto;
Para centrar algo horizontalmente en navegadores modernos, usa display: flex; justify-content: center; .
Sin embargo, en navegadores antiguos como IE8-9, flexbox no está disponible. Para poder centrar un elemento horizontalmente con respecto a su contenedor, usa margin: 0 auto;
Ejemplo en un documento:
Sumario:
Todas las propiedades de los márgenes CSS
| propiedad | descripción |
|---|---|
| margen | Abreviación de las propiedades. Ajuste todas las propiedades de los márgenes en una declaración. |
| margin-bottom | Marco exterior de un elemento. |
| margin-left | El elemento en el margen izquierdo. |
| margin-right | El elemento del margen derecho. |
| margin-top | Elemento se encuentra en el margen. |
IR A PORTAFOLIO
