La hoja de estilo en cascada (CSS) proporciona cientos de propiedades de estilo para los elementos HTML. Junto con los estilos de decoración, también proporciona propiedades para ajustar las posiciones y la colocación de los elementos en la página web. Estas propiedades incluyen "flotar","relleno","margen","posición", y muchos más.

Esta publicación cubrirá:

• ¿Cuál es la propiedad de "relleno" en CSS??
• Cómo especificar la propiedad de "relleno"?

¿Cuál es la propiedad de "relleno" en CSS??

El "relleno"La propiedad describe la distancia entre el contenido de un elemento y su borde. Más específicamente, esta propiedad agrega espacio dentro del elemento, mientras que el "margenLa propiedad genera espacio alrededor del elemento. Los valores de la propiedad de relleno se pueden medir en "px","Em","movimiento rápido del ojo", o más. Sin embargo, el "movimiento rápido del ojo"Es la mejor unidad para usar con propiedades de margen y acolchado.

Prerrequisito: cree un archivo HTML

Para aplicar la propiedad de relleno en elementos HTML, los usuarios deben crear el archivo HTML. Para este propósito, utilice los siguientes pasos:

• Agrega un ""Elemento y asignarlo una clase"contenido principal".
• Luego, incluya el ""Etiqueta para colocar una imagen y"

  "Etiqueta para incluir algún texto:

La luz de la educación nos hace brillantes.

Avancemos a la sección CSS para aplicar el estilo al contenedor.

Elemento de estilo "div"

Primero, acceda al elemento "" que tiene clase ".contenido principal”Y aplique las siguientes propiedades:

.contenido principal
Ancho: 400px;
margen: auto;
borde: 5px Groove RGB (151, 151, 151);

La descripción de las propiedades mencionadas anteriormente es la siguiente:

• "ancho"Determina el ancho del elemento.
• "margen"Define el espacio alrededor del elemento.
• "borde"Aplica el borde alrededor del elemento especificando los valores para el ancho, el estilo y el color del borde.

La salida del código proporcionado anteriormente se representa a continuación:

Cómo especificar la propiedad de "relleno"?

En CSS "relleno"La propiedad tiene un rango de uno a cuatro valores. Para una mejor comprensión, siga los ejemplos enumerados:

• Ejemplo 1: propiedad de "relleno" de CSS con un valor
• Ejemplo 2: propiedad de "relleno" de CSS con dos valores
• Ejemplo 3: propiedad de "relleno" de CSS con tres valores
• Ejemplo 4: propiedad de "relleno" de CSS con cuatro valores

Ejemplo 1: propiedad de "relleno" de CSS con un valor

En CSS, cuando el "relleno"A la propiedad se le asigna un valor, agrega"1rem"Espacio en cada lado del contenido del elemento:

relleno: 1rem;

Producción

Ejemplo 2: propiedad de "relleno" de CSS con dos valores

El "relleno"La propiedad se puede ajustar con dos valores, donde:

• El "primer valor"Representa el relleno (espacio) en los lados superior e inferior.
• El "segundo valor"Representa el espacio en los lados izquierdo y derecho del contenido del elemento:

relleno: 1rem 2rem;

Producción

Ejemplo 3: propiedad de "relleno" de CSS con tres valores

El CSS "relleno"La propiedad se puede ajustar con los tres valores. Funcionan de la siguiente manera:

• El primer valor indica acolchado en la parte superior.
• El segundo valor significa relleno en los lados izquierdo y derecho.
• El tercer valor define el acolchado en la parte inferior del contenido del elemento:

relleno: 1rem 2rem 3rem;

Producción

Ejemplo 4: propiedad de "relleno" de CSS con cuatro valores

El "relleno"La propiedad con cuatro valores ajusta el espacio especificado entre el contenido y el borde desde todos los lados como se describe a continuación:

• "Primer valor"Agrega relleno en la parte superior.
• "Segundo valor"Agrega relleno en el lado derecho.
• "Tercer valor"Agrega relleno en la parte inferior.
• "Cuarto valor"Agrega relleno en el lado izquierdo:

relleno: 2rem 3rem 1rem 2rem;

Producción

Hemos elaborado en estilos de acolchado HTML con diferentes valores usando CSS.

Conclusión

El CSS "relleno"La propiedad aumenta la distancia alrededor del contenido del elemento. Tiene un rango de valor de uno a cuatro. "Un valor"Significa el mismo relleno en cada lado del contenido del elemento. "Dos valores"Defina el espacio en el fondo superior y los lados de la izquierda derecha. "Tres valores"Establezca el acolchado en la parte superior, izquierda-derecha e inferior del contenido del elemento. "Cuatro valores"Especifique el relleno único en cada lado. Esta publicación ha demostrado el estilo de acolchado HTML en CSS.