El relleno CSS permite que un codificador HTML establezca el relleno predeterminado o el espacio muerto fuera de un elemento HTML. El beneficio de hacer esto es que evita que el codificador repita ese código de relleno para cada instancia de ese elemento y crea más fácilmente coherencia en la página. El elemento HTML que se va a rellenar puede ser cualquier número de elementos, como un párrafo, una tabla o un encabezado.
Para crear relleno en CSS, primero deberá identificar el elemento HTML que desea rellenar. Este elemento que desea rellenar se conoce como selector. Luego, querrá especificar los valores de relleno apropiados. Hay cinco tipos diferentes de propiedades de relleno en CSS: uno para los cuatro lados de un elemento a la vez y otros cuatro para cada lado individual del elemento (por ejemplo, el lado izquierdo, el lado derecho, el lado superior o el lado inferior ). Una propiedad que permite al programador especificar valores para los cuatro lados de un elemento HTML a la vez se denomina propiedad abreviada.
El lenguaje de codificación utilizado para especificar una declaración de relleno CSS es simplemente la palabra «relleno». Después de esa etiqueta, están los “valores” relevantes del relleno, o información sobre la cantidad de espacio deseada, generalmente representada por píxeles o un porcentaje. El relleno y los valores se escriben entre llaves o llaves (es decir, “{” y “}”). Antes de todo eso está el elemento HTML que se rellenará (por ejemplo, «p» para el párrafo o «H2» para los encabezados de nivel 2).
En términos de cómo se representa el valor, los valores se pueden representar en píxeles (p. Ej., 1px o 5px), puntos (p. Ej., 1 pt o 5pt) o pulgadas (p. Ej., 1 pulg. O 5 pulg.) O centímetros (p. Ej., 1 cm o 5 cm) . Los valores también se pueden declarar como un porcentaje del elemento HTML al que se le aplica el estilo. Si el valor es 50%, por ejemplo, el relleno será igual a la mitad del tamaño del elemento.
Los siguientes ejemplos son el código HTML para rellenar un elemento HTML mediante valores reflejados en porcentaje y longitud, respectivamente. Si solo se asigna un valor, los navegadores web asignarán este relleno a los cuatro lados del elemento HTML.
acolchado: 10%;
padding: 100px;
Agregar más valores al tipo de declaración de relleno anterior hará que los navegadores web los interpreten de cierta manera. Si se asignan dos valores, el primero corresponderá a la parte superior e inferior, mientras que el segundo corresponde a la izquierda y la derecha. Tres valores harán que el primero se refiera a la parte superior, el segundo a los lados izquierdo y derecho y el tercero a la parte inferior del elemento HTML. Asignar el máximo de cuatro valores hace que el primero, segundo, tercero y cuarto valores correspondan a la parte superior, derecha, inferior e izquierda del elemento HTML, en ese orden. Cuando se proporciona más de un valor, deben estar separados por espacios y terminados con un punto y coma, por ejemplo:
relleno: 10px 20px 10px 20px;
El relleno en CSS también se puede hacer de uno en uno. En este sentido, hay cuatro propiedades de relleno más disponibles. Estos son padding-top, padding-right, padding-bottom y padding-left. Para crear relleno en CSS de esta manera más precisa, deberá etiquetar las propiedades con la misma sintaxis que las declaraciones abreviadas anteriores. Cada una de estas propiedades de relleno solo toma un valor en longitud o porcentaje. Por ejemplo:
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
El siguiente código crea una página web, declara las propiedades de relleno entre las etiquetas de estilo y luego las usa en un elemento de párrafo especificado por la etiqueta p. El texto entre / * y * / son notas para explicar el tipo de relleno empleado y no se incluirían en el código de relleno CSS.
Este texto tiene el mismo relleno en cada lado. El acolchado de cada lado es de 10 px.
Este texto tiene un relleno superior e inferior de 50 px y un relleno izquierdo y derecho de 30 px.
Este texto tiene un relleno superior de 10 px, un relleno derecho de 20 px, un relleno inferior de 10 px y un relleno izquierdo de 20 px.
En el ejemplo anterior, «ejemplo1», etc., son nombres asignados a una clase, a los que luego se hace referencia en los párrafos. El período entre la etiqueta p y los nombres de las clases al comienzo del código denota una declaración de una clase asignada a un párrafo. Observe las llaves después de la declaración de clase que encierran las asignaciones de valor de propiedad de relleno.
Aunque esto puede parecer mucho trabajo, es mucho menos laborioso que especificar el relleno para cada párrafo individual. Puede declarar una propiedad de relleno para el elemento deseado, que en el ejemplo anterior es la etiqueta p, y luego hacer referencia a la clase cuando usa el elemento entre las etiquetas del cuerpo de la página. Si solo se necesita un tipo de relleno para todos los párrafos, no necesita usar clases en absoluto. Simplemente use el siguiente código entre las etiquetas de estilo y luego codifique los párrafos sin especificar ninguna clase. Este código iría entre las etiquetas del cuerpo en lugar del código del ejemplo anterior.
p {relleno: 10px 20px 10px 20px;}
Este relleno CSS que esto crearía afectaría a todos los párrafos aunque no se especificara una clase.