Propiedad padding en CSS, (Introducción a CSS)
La propiedad padding o relleno en CSS establece la anchura de algunas o todas las zonas de relleno de los elementos HTML.
Lo valores permitidos de la propiedad margin son: medida, porcentaje, auto, inherit
Es importante mencionar que si utilizamos porcentaje como unidad de medida, el padding hace referencia a la anchura del elemento en el que se encuentra.
Propiedad padding, ejemplos de uso
La propiedad padding es una de las “propiedades shorthand” que define CSS y que se utilizan para establecer de forma abreviada el valor de una o más propiedades individuales.
Si se quiere establecer el mismo valor para todas las zonas de relleno de un elemento, se podría utilizar la siguiente regla CSS:
div { padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; } |
Utilizando la propiedad padding, es posible establecer de forma abreviada el mismo valor para todas las zona de relleno de un elemento:
div { padding: 10px; } |
La propiedad padding es tan poderosa que permite establecer uno, dos, tres o las cuatro zonas de relleno de forma simultánea.
Si se indican dos valores, el primero hace referencia a las zona de relleno verticales y el segundo es el valor de las zonas de relleno horizontales, de modo que las siguientes reglas CSS son equivalentes:
div { padding: 10px 20px; } div { padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; } |
Si se indican tres valores, el primero hace referencia a la zona de relleno superior, el segundo es el valor de las zonas de relleno horizontales y el tercero es la zona de relleno inferior, de modo que las siguientes reglas CSS son equivalentes:
div { padding: 10px 20px 30px; } div { padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 20px; } |
Por último, si se indican cuatro valores, el primero es la zona de relleno superior, el segundo es la zona de relleno derecha, el tercero es la zona de relleno inferior y el cuarto es el la zona de relleno izquierda, de modo que las siguientes reglas CSS son equivalentes:
div { padding: 10px 20px 30px 40px; } div { padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px; } |
El uso de propiedades como padding no sólo hace más breve el código CSS, sino que demuestra que se tienen conocimientos avanzados de CSS. Información mas detalla pueden leer los siguientes enlaces: