• Margen

     

     

    El margen externo se regula con la propiedad margin. El margen exterior es la distancia mínima que habrá entre el borde exterior del elemento y el elemento siguiente, por cada uno de sus cuatros lados. 

     

    margin: 0
    margin: 0
    margin:5px
    margin:5px 35px
    margin:15px
    margin: 0
    margin-left:-20px
    margin: 30px 10px 5px 20px;

     

    Los margenes no se suman, se solapan, prevaleciendo el mayor. Así, si un párrafo tiene un margen inferior de 50px y el de abajo un margen superior de 30px, entre ellos quedará un margen de 50px, por ser el mayor, pero no de 70px.

    Otro valor que podemos dar al margen es auto. Este valor da a ambos márgenes el mismo valor, y nos permite, por ejemplo, horizontalmente un elemento con una anchura determinada.

    El margen está fuera del elemento. Observa, por ejemplo que no mantiene el color de fondo del elemento.

    El margen interno se regula con la propiedad padding. Se refiere a la distancia que hay ente el borde del elemento y su contenido, por ejemplo el texto.

     

     

     

    Padding

     

    padding: 0
    padding: 0
    padding:5px
    padding:5px 35px
    padding:15px
    padding: 0
    padding-bottom:20px

    El padding si que forma parte del elemento, por eso muestra el mismo fondo.

    Bordes y márgenes