Cómo implementar el relleno en CSS con ejemplos



Este artículo le proporcionará un conocimiento detallado y completo sobre cómo implementar el relleno en CSS con ejemplos.

El acolchado es uno de los aspectos más importantes de y . En este artículo discutiremos la importancia y el uso de Padding en CSS en el siguiente orden:

¿Qué es el relleno en CSS?

La propiedad padding le permite saber dónde especificar y cuánto espacio debe aparecer entre el texto del contenido de un elemento y su borde. El valor de este atributo debe ser una longitud o un porcentaje, o la palabra.





Padding-in-CSS



Si el valor se hereda, tendrá el mismo relleno que el principal. Aquí, si se usa el porcentaje, el porcentaje es del cuadro contenedor.

Propiedades de relleno

Las siguientes propiedades de Padding en CSS se pueden utilizar para controlar listas. Aún así, también puede establecer diferentes valores para el relleno en cualquiera de los lados de la caja utilizando principalmente las siguientes propiedades:

  • Fondo acolchado: especifica el relleno inferior de un elemento.



  • Acolchado superior: Especifica el relleno superior de un elemento.

  • Relleno a la izquierda: Especifica el relleno izquierdo del elemento.

  • Relleno a la derecha: Especifica el relleno correcto del elemento.

  • Relleno: Esto sirve como una abreviatura para otras propiedades.

La propiedad del fondo acolchado:

ejecutar la consulta de colmena desde la línea de comando

Se establece en el relleno inferior de un elemento. Puede tomar los valores en longitud de porcentaje.


Este es el relleno inferior especificado en el párrafo



Este es otro párrafo con relleno inferior especificado en porcentaje

Salida:

La propiedad Padding-top

Esta propiedad padding-top establecerá el relleno superior de un elemento. Esto puede tomar valores en forma de porcentaje.


Este es el relleno superior especificado en el párrafo



Este es otro párrafo con relleno superior especificado en porcentaje

Salida:

La propiedad Padding-left

Esta propiedad padding-left establecerá el padding-left de un elemento. Puede tomar valores en longitud de porcentaje.


Este es el relleno izquierdo especificado en el párrafo



Este es otro párrafo especificado con relleno a la izquierda en porcentaje

Salida:

La propiedad Padding-right

Esta propiedad padding-right establecerá el padding correcto de un elemento. Puede tomar valores en longitud de porcentaje.


Este es el relleno derecho especificado en el párrafo



Este es otro párrafo especificado con relleno derecho en porcentaje

Salida:

La propiedad de relleno

Esta propiedad de relleno establece el relleno derecho, izquierdo, superior e inferior. Esto puede tomar los valores en forma de porcentaje.


Todos estos cuatro rellenos serán de 20px



El relleno superior e inferior será de 20 píxeles, el de la derecha y la izquierda será el 10% del ancho total del documento



El relleno superior e inferior será de 20 píxeles, el relleno derecho será el 3% del ancho total del documento, el relleno inferior y el relleno superior será de 20 píxeles

Salida:

Con esto, llegamos al final de este asombroso artículo sobre Padding en CSS. Espero que comprenda las diversas formas en que podemos agregar relleno.

Si está interesado en obtener más información sobre el desarrollo web, consulte la por Edureka. La capacitación para la certificación de desarrollo web lo ayudará a aprender cómo crear sitios web impresionantes usando HTML5, CSS3, Twitter Bootstrap 3, jQuery y las API de Google y cómo implementarlo en Amazon Simple Storage Service (S3).

Si aún está interesado Si tiene alguna pregunta, puede publicarla en la sección de comentarios de este blog “Padding in CSS”, y nos pondremos en contacto con usted lo antes posible.