CSS Márgenes

CSS Márgenes

Generar espacios entre elementos

CSS Márgenes

• margin-top
• margin-left
• margin-bottom
• margin-left

• auto (navegador calcula el margen)
• length (usar pc, pt, cm)
• % (especificar con el ancho del contenedor)
• inherit (margen hereda del padre)

VALORES NEGATIVOS PERMITIDOS

CSS Márgenes

div {
    margin-top: 200px;
    margin-bottom: 200px;
    margin-right: 250px;
    margin-left: 100px;
}

Acortar Propiedad

/* top right bottom left */
div {
   margin: 200px 100px 50px 40px;
}

/* todos el mismo */
div{
    margin: 30px;
}

Auto Value

/* auto */
div {
   margin: auto;
}

Central horizontalmente el elemento con el contenedor

Inherit Value

div{
    margin-left: 10px;
}

p{
    margin-left: inherit;
}

Toma el valor del padre

<div>
      <p>ALFAS</p>
</div>

CSS Padding

CSS Padding

Espacio dentro del borde de un elemento

• padding-top
• padding-right
• padding-bottom
• padding-left

• length (px, cm, etc)
• %
• inherit

Acortar Propiedad

/* top right bottom left*/
p {
    padding: 10px 20px 40px 90px;
}

/* todos */
p {
    padding: 10px;
}