Esta propiedad
representa la distancia del contenido interno al contenido externo. El área alrededor
del contenido. Es una medida interna:
Cuando la propiedad
padding esta presente sucede lo siguiente:
ancho = padding-left +
width + padding-right
alto = padding-top +
height + padding-botom
es decir, alto y ancho
incluyen padding, que si elemento tiene width= 100px de ancho y padding=20px;
se mostrara en pantalla midiendo 140px.
pero si el elemento
tiene la propiedad box-sizing=border-box esto no sucede
La propiedad padding
puede aplicarse a cada lado en particular, en longitud o en porcentaje
- · padding-top
- · padding-right
- · padding-bottom
- · padding-left
Ejemplo:
p p {
padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:40px;
}
e el código anterior es equivalente a:
p {
padding: 10px 20px 30px 40px;
}
Si la propiedad
padding tiene tres valores:
p {
padding: 25px 50px 75px;
}
padding: 25px 50px 75px;
}
top padding es 25px
right and left
paddings son 50px
bottom padding es 75px
Si la propiedad
padding tiene dos valores:
p {
}
top y bottom paddings son
25px
right y left paddings
son 50px
