El funcionamiento y sintaxis es similar al visto para el padding:
margin: margin-top margin-right margin-bottom margin-left
Ejemplo:
p {
margin:5px 2px 4px 10px;
}
si indicamos un único valor se aplica a los cuatro lados:
margin: 1px
si indicamos dos valores, el primero se aplica a la parte superior e inferior y el segundo valor a los lados izquierdo y derecho.
Un ejemplo para ver la sintaxis:
<!DOCTYPE html> <html> <head> <title>Problema</title> <meta charset="UTF-8"> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <h1>Titulo Principal</h1> </body> </html>
Y la hoja de estilo:
h1 {
margin:70px 20px;
}
la clase recuadro fija un márgen de 70 píxeles en el borde superior e inferior, y 20 píxeles en los bordes izquierdo y derecho.