Padding
Las propiedades de padding CSS definen el espacio entre el borde del elemento y el contenido del elemento.
El padding crea un área alrededor de los contenidos (en el interior del elemento). El padding se ve afectado por el color de fondo del elemento.
Esta propiedad nos permite alejar los elementos del borde que los contiene.
Como vimos en el caso de margin podemos especificar el padding con el valor auto, el cual nos ajusta el contenido con la configuración predefinida del navegador de manera abreviada o especificando cada padding individualmente.
En CSS, es posible especificar diferentes tipos de pading para diferentes lados:
padding-top: 25px;/*Establece el padding superior*/
padding-bottom: 25px;/*Establece el padding Inferior*/
padding-right: 50px;/*Establece el padding Derecho*/
padding-left: 50px;/*Establece el padding Derecho*/
Para acortar el código, es posible especificar todas las propiedades de padding en una propiedad. Esto se llama una propiedad abreviada.
padding:25px 50px 30px 50px;
La propiedad de relleno puede tener de uno a cuatro valores.
- padding: 25px 50px 75px 100px;
- relleno superior es 25px
- relleno derecho es 50px
- relleno de fondo es 75px
- margen izquierdo es 100px
- padding: 25px 50px 75px;
- relleno superior es 25px
- rellenos derecha e izquierda son 50px
- relleno de fondo es 75px
- padding: 25px 50px;
- rellenos superior e inferior son 25px
- rellenos derecha e izquierda son 50px
- padding: 25px;
- los cuatro rellenos son 25px
Apliquemos el padding a nuestro ejercicio de del formulario que traemos desde las lecciones anteriores.
<!DOCTYPE HTML><html lang = "es"><head><title>Formulario</title><meta charset = "UTF-8" /><style>fieldset {width: 80%;margin: auto;}form{width: 30%;}label {float: left;width: 30%;margin-left: 15%;padding-right: 1em;}input {display: block;}button {display: block;margin: auto;}</style></head><body><form action = ""><fieldset><label>Nombre</label><input type = "text" id = "txtNombre" /><label>Dirección</label><input type = "text" id = "txtDirec" /><label>Teléfono</label><input type = "text" id = "txtTel" /><button type = "button">Enviar</button></fieldset></form></body></html>
Bien note en azul el pequeño código que fue añadido
Copie el código en su editor de texto y corralo en su navegador y vea el cambio con la propiedad padding y sin la propiedad para que note la diferencia,
Experimente colocando el padding en diferentes lugares para que note los cambios.
En este ejemplo ocupamos la unidad de medida "em", la cual representa la unidad previamente especificada, por defecto en la mayoría de los navegadores sería 16px; Bajo esta medida:
- 1em - 16px
- 2em - 32px
- así...
No hay comentarios:
Publicar un comentario