¿Cómo creo relleno en CSS?
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 coherencia en la página más fácilmente. El elemento HTML a rellenar puede ser cualquier cantidad de cosas, como un párrafo, una tabla o un encabezado.
Para crear relleno en CSS, primero debe 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". A continuación de esa etiqueta, se encuentran los "valores" relevantes del relleno, o información sobre la cantidad de espacio deseado, generalmente representado por píxeles o un porcentaje. El relleno y los valores se escriben dentro de llaves o llaves (es decir, "{" y "}"). Antes de todo eso está el elemento HTML a 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., 1pt o 5pt) o pulgadas (p. Ej., 1in o 5in) o centímetros (p. Ej., 1cm o 5cm) . Los valores también se pueden declarar como un porcentaje del elemento HTML que se está diseñando. 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 un 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%;
acolchado: 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 corresponderá a la izquierda y a la derecha. Tres valores harán que el primero haga referencia 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 los valores primero, segundo, tercero y cuarto 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 un lado a la vez. 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 que se mencionan anteriormente. Cada una de estas propiedades de relleno solo toma un valor en longitud o porcentaje. Por ejemplo:
relleno superior: 10px;
relleno derecho: 20px;
relleno inferior: 10px;
relleno-izquierda: 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ía en el código de relleno CSS.
<html>
<head>
<style type = "text / css">
p.example1 {padding: 10px;} / * Relleno de mano corta para los cuatro lados * /
p.example2 {padding: 50px 30px;} / * Relleno de mano corta para la parte superior e inferior seguido de la izquierda y la derecha * /
p.ejemplo3 {
relleno superior: 10px;
relleno inferior: 20px;
relleno inferior: 10px;
relleno-izquierda: 20px;
} / * relleno individual. * /
</style>
</head>
<cuerpo>
<p class = "example1"> Este texto tiene el mismo relleno en cada lado. El relleno en cada lado es de 10 px. </p>
<p class = "example2"> Este texto tiene un margen superior e inferior de 50 píxeles y un margen izquierdo y derecho de 30 píxeles. </p>
<p class = ”example3”> Este texto tiene un margen superior de 10 píxeles, un margen derecho de 20 píxeles, un margen inferior de 10 píxeles y un margen izquierdo de 20 píxeles. </p>
</body>
</html>
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 clase 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 encierra las asignaciones de valores de propiedad de relleno.
Aunque esto puede parecer mucho trabajo, requiere mucho menos trabajo 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 en el ejemplo anterior.
p {relleno: 10px 20px 10px 20px;}
Este relleno de CSS que esto crearía afectaría a todos los párrafos a pesar de que no se especificó ninguna clase.