Propiedad de relleno en CSS explicada
El relleno y los márgenes son fenómenos interconectados, ya que ambas propiedades tienden a crear espacio alrededor de los elementos. Sin embargo, la diferencia es que el acolchado crea espacio dentro de los bordes, y el margen suma espacio fuera del borde. Esta publicación informativa describe el trabajo y el uso de la propiedad de relleno en CSS.
Cómo funciona la propiedad del acolchado en CSS
El objetivo principal de la propiedad del relleno es agregar espacio alrededor de los elementos. El relleno se puede usar de una de las siguientes maneras:
Uso de la propiedad de relleno en los lados individualmente
El relleno se puede dar a los lados individuales emitiendo la siguiente sintaxis:
Selector Padding-Top: value; // en el lado superiorSelector Padding-Right: Value; // En el lado derecho
Selector Bottom: valor; // en la parte inferior
Selector Padding-Left: Value; // en el lado izquierdo
Las instancias de la sintaxis anterior se describen a continuación:
- El selector es un elemento o puede referirse a la clase CSS
- La cima del acolchado, el relleno de la derecha, el fondo del relleno y la izquierda del relleno representan los lados de relleno
- El valor define el espacio que se proporcionaría, y el valor puede tener una unidad de medición I.mi., Longitud (PX, CM, REM, EM), %(porcentaje según el elemento), Auto (según lo definido por el navegador).
Nota: Los valores medidos en PX son absolutos (fijos), mientras que los valores en %, REM y EM se usan para la capacidad de respuesta y se ajustan automáticamente.
Uso de la propiedad de la taquigrafía de relleno
La propiedad de la taquigrafía del acolchado se puede usar para agregar espacio a varios lados simultáneamente. Se practica la siguiente sintaxis utilizando la propiedad de la taquigrafía del acolchado en CSS.
Selector Padding: Value1 Value2 Value3 Value4;En la sintaxis anterior, el valor1, el valor2, el valor3 y el valor4 representa el lado superior, derecha, inferior e izquierdo del elemento.
Cómo usar la propiedad de relleno en CSS
Esta sección se compone de varios ejemplos que definen el uso de la propiedad de relleno en CSS.
Ejemplo 1: Uso de la propiedad de relleno en lados individuales
El siguiente código practica la propiedad de relleno en todos los lados individualmente.
Propiedad de relleno en CSS
Usando la cima del relleno en PX
Usando la derecha del relleno en EM
Usar el fondo del relleno en %
Usando el relleno-izquierda en PX
La descripción del código se da a continuación
- El ancho de todos los párrafos sería "en forma" para obtener mejor la comprensión del relleno
- Cuatro clases de CSS nombradas como "Top", "Rig", "Bot" y "Lef" se refieren a propiedades de almohadilla, almo
- Las clases "Top" y "Lef" usan la "PX" como unidad de medición para rellenar donde las clases de "Rig" y "Bot" practican "EM" y "%" como unidad de medición para rellenar
- Los cuatro párrafos usan las clases CSS para implementar el relleno en estos párrafos
La imagen del código se muestra aquí
Producción
Ejemplo 2: Uso de la propiedad de relleno en varios lados simultáneamente
La propiedad de la taquigrafía de relleno le permite agregar relleno a varios lados simultáneamente y aquí se practica utilizando el siguiente código.
Propiedad de relleno en CSS
Usando el relleno en PX
Usando acolchado 3% a la parte superior/inferior y 6% a la izquierda/derecha
Usar el acolchado 2EM a arriba/abajo y 3EM a la derecha/izquierda
Usando el relleno 5px a todos los lados
omitir la propiedad del relleno en el lado izquierdo
La descripción del código se proporciona a continuación
- definidos varios estilos como color de fondo, ancho y estilo borde para todos los párrafos
- Se usan cinco clases de CSS nombradas "Todos", "Trio", "Duo", "Nano" y "Skip".
- La clase "todas" permite agregar diferentes valores de relleno a todos los lados
- La clase "trío" agrega un valor de acolchado 3% a la parte superior/inferior y 6% a la derecha/izquierda
- La clase "dúo" permite la propiedad de relleno en la parte superior/inferior por 2EM y a la derecha/izquierda por 3EM
- El "nano" agregará el valor de relleno 5px a todos los lados
- La clase "Skip" agrega relleno a los tres lados y se omitiría el lado izquierdo (ya que su valor es 0 en la clase CSS anterior) a los lados.
Nota: Además de omitir el acolchado en el lado izquierdo, se puede omitir cualquier otro lado utilizando 0 valor en el lugar.
La imagen del código se muestra a continuación
Producción
De la salida anterior, se puede obtener el concepto de propiedad de relleno en varios escenarios.
Los ejemplos anteriores le permiten aprender la funcionalidad del relleno en los siguientes contextos:
- Uso de la propiedad de relleno en cada lado individualmente
- Uso de la propiedad de relleno con varios valores de medición (PX, % y EM)
- Uso de la propiedad de la taquigrafía de relleno para agregar relleno en varios lados simultáneamente o omitir cualquier lado
Conclusión
El relleno es la propiedad utilizada para crear espacio alrededor de un elemento. El relleno se puede proporcionar a los lados individuales que usan, el acolchado, el relleno derecho, el fondo del relleno y el relleno-izquierda. Este puesto informativo ilumina el mecanismo de trabajo y el uso de la propiedad de relleno en CSS. Además, también hemos proporcionado consejos para trabajar en la propiedad de la taquigrafía que contiene el efecto combinado de la cima de relleno/derecha/abajo/izquierda y se aplica en múltiples lados simultáneamente.