Se pueden especificar con las siguientes propiedades:
margin-topSolo especifica el tamaño del margen en la parte superior de la caja.
Ejemplo:
margin-top: 3vh
margin-bottomSolo especifica el tamaño del margen en la parte inferior de la caja.
Ejemplo:
margin-bottom: 50%
margin-leftSolo especifica el tamaño del margen en el lado izquierdo de la caja.
Ejemplo:
margin-left: 8px
margin-rightSolo especifica el tamaño del margen en el lado derecho de la caja.
Ejemplo:
margin-right: 3vw
margin: tamañoEspecifica el mismo tamaño de margen arriba, abajo, a la izquierda y a la derecha.
Ejemplo:
margin: 1em
El margen mide 1 renglón en todas las direcciones alrededor
del elemento.
margin: tam_vertical tam_horizontal
tam_vertical es el tamaño de los márgenes superior e inferior.
tam_horizontal es el tamaño de los márgenes izquierdo y derecho.
Ejemplo:
margin: 1em 2em
El margen mide 1 renglón arriba y abajo, 2 renglones a la
izquierda y derecha.
margin: tam_arr tam_der tam_ab tam_izq
tam_arr es el tamaño del márgen superior.
tam_der es el tamaño del márgen derecho.
tam_ab es el tamaño del márgen inferior.
tam_izq es el tamaño del márgen izquierdo.
Ejemplo:
margin: 3em 2em 4em 1em
El margen mide 3 renglones arriba, 2 a la derecha, 4 abajo y
1 a la izquierda.
| 1 | <!DOCTYPE html> |
| 2 | <html lang="es"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" |
| 6 | content="width=device-width"> |
| 7 | <title>Modelo de cajas</title> |
| 8 | <style> |
| 9 | div { |
| 10 | margin: 1.5rem; |
| 11 | border: thick solid burlywood; |
| 12 | background-color: greenyellow; |
| 13 | } |
| 14 | </style> |
| 15 | </head> |
| 16 | <body> |
| 17 | <div>Contenido</div> |
| 18 | </body> |
| 19 | </html> |