Fondo CSS
Propiedad inferior
La propiedad inferior se usa para definir el posicionamiento de un elemento desde la base de la página, y define el espacio entre el final de la página y el elemento. Para definir la propiedad inferior, usamos la siguiente sintaxis:
Como podemos ver, la propiedad inferior se especifica llamando a la palabra clave seguida de un valor que puede variar en cinco tipos diferentes que son: automáticamente, longitud, porcentaje, inicial y heredado. La propiedad inferior solo afectará el elemento cuando la propiedad de posición esté configurada para solucionar, de lo contrario no se aplicará al elemento.
Método 01: Uso de la palabra clave automática para asignar la propiedad inferior en un archivo HTML con la ayuda de CSS en línea
En este método, utilizaremos la palabra clave automática para asignar la propiedad inferior de un elemento en un archivo HTML. Esto alineará el elemento con la base de la página del navegador. Usaremos el formato de estilo CSS en línea en este método para asignar la propiedad inferior a un elemento.
En el script anterior, proporcionamos un rumbo al cuerpo usando la etiqueta H1 y algunos CSS en línea también. Luego abrimos una etiqueta de párrafo y, en esta etiqueta, agregamos la posición y la propiedad inferior y los establecemos en "fijo" y "automático", respectivamente. La propiedad fija de posición permite que el fondo cree un efecto en la etiqueta del párrafo y la ajuste de acuerdo con nuestro navegador. Ahora, guardamos este archivo y lo ejecutamos en nuestro navegador para observar el efecto de esta propiedad.
Como podemos ver en la captura de pantalla anterior, el párrafo en la etiqueta del cuerpo está presente entre la página después del encabezado. Esto sucedió debido a la posición y las propiedades inferiores.
Método 02: Uso de los píxeles para asignar la propiedad inferior en un archivo HTML con la ayuda de CSS en línea
En este enfoque, asignaremos el atributo inferior de un elemento en un archivo HTML utilizando el formato de longitud (valor en píxeles). Esto hará que el elemento se ajuste con la parte inferior de la página del navegador con la ayuda de la longitud dada.
Usamos la etiqueta "H1" y algunos CSS en línea para darle al cuerpo un encabezado en el script anterior. Luego abrimos una etiqueta de párrafo y aplicamos las propiedades de posición e inferior. La propiedad de posición se estableció en "fija", y la propiedad inferior recibió un valor de píxel de "25px."El atributo fijo de posición permite que el fondo tenga un efecto en la etiqueta del párrafo y lo adapte en función de la longitud especificada y la página de nuestro navegador. Ahora, guardamos este archivo y lo ejecutamos en nuestro navegador para ver cómo funciona esta propiedad.
Como podemos ver en la captura de pantalla anterior, el párrafo en la etiqueta del cuerpo está presente en la parte inferior de la página después del encabezado. Podemos ver que hay una brecha entre el párrafo y la base de la página porque la posición y las propiedades inferiores están configuradas para darle una longitud de "25px".
Método 03: Uso de la propiedad inferior con un "porcentaje" para un elemento que usa CSS en línea
En este método, utilizaremos el formato porcentual para establecer la propiedad inferior de un elemento en un archivo HTML. Esto hace que el elemento se ajuste a la parte inferior de la página del navegador utilizando un valor porcentual. En este método, agregaremos el atributo inferior a un elemento utilizando el estilo CSS en línea.
En el script anterior, utilizamos la etiqueta "H1" y algunos CSS en línea para darle un encabezado al cuerpo. Luego abrimos una etiqueta de párrafo y establecimos su posición y propiedad inferior. La propiedad de posición se estableció en "fija", y la propiedad inferior recibió un valor porcentual que es "30 por ciento."La propiedad fija de posición permite que la parte inferior afecte la etiqueta del párrafo y la modifique en función de la cantidad porcentual dada y la página de nuestro navegador. Ahora guardamos este archivo y lo abrimos en nuestro navegador para verificar cómo funciona esta propiedad.
Como se ve en el ejemplo anterior, el párrafo en la etiqueta del cuerpo aparece en la parte inferior de la página después del encabezado. La posición y los atributos inferiores se establecen en un valor porcentual de "30 por ciento", por lo que hay una brecha entre el párrafo y la parte inferior de la página.
Método 04: Uso de la palabra clave de heredar para asignar la propiedad inferior en un archivo HTML con la ayuda de CSS en línea
En este enfoque, estableceremos el atributo inferior de un elemento en un archivo HTML utilizando la palabra clave heredada. Esto obligará al elemento a ajustarse a la parte inferior de la página del navegador utilizando el valor de propiedad de la función principal más cercana. Usando el estilo CSS en línea, agregaremos la propiedad inferior a un elemento en este enfoque.
En el script anterior, abrimos una etiqueta de párrafo y establecimos su posición y propiedad inferior. Después de eso, la propiedad de posición se estableció en "fijo", y la propiedad inferior recibió la palabra clave "Hereder."La propiedad fija de posición permite que la parte inferior afecte la etiqueta del párrafo y la cambie en función del valor de la propiedad de la función principal más cercana y la página del navegador. Este archivo ahora se guardará y se abrirá en nuestro navegador para ver cómo funciona esta propiedad.
El párrafo en la etiqueta del cuerpo aparece cerca del encabezado, como se ve en el fragmento anterior. Hay una brecha entre el párrafo y el encabezado porque se especifica la propiedad inferior para darle al párrafo la función de propiedad de la función principal más cercana.
Método 05: Uso de la palabra clave inicial para asignar la propiedad inferior en un archivo HTML con la ayuda de CSS en línea
Usaremos la palabra clave "inicial" para establecer la propiedad inferior de un elemento en un archivo HTML. Esto obligará al elemento a ajustarse a la parte inferior de la página del navegador utilizando la configuración predeterminada del navegador. En este método, agregaremos el atributo inferior a un elemento utilizando el estilo CSS en línea.
Abrimos una etiqueta de párrafo y establecimos su posición y propiedad inferior como se muestra en el script anterior. La propiedad de posición se estableció luego en "fijo", y la propiedad inferior recibió la palabra clave "inicial."El atributo fijo de posición permite que el fondo afecte la etiqueta del párrafo y la cambie en función de la configuración predeterminada del navegador. Este archivo ahora se guarda y se ve en nuestro navegador para demostrar el uso de esta característica.
Como se observa en el fragmento anterior, el párrafo en la etiqueta del cuerpo está cerca del encabezado. Dado que se especifica la propiedad inferior para modificar el párrafo a la configuración predeterminada de nuestro navegador, hay una brecha entre el párrafo y el encabezado.
Conclusión
La propiedad inferior de CSS se ha abordado en este artículo. La propiedad inferior se incluye en un subgrupo de propiedades de posición, como la izquierda, la derecha y la parte superior, y depende de la propiedad de posición como explicamos. Implementamos este concepto con variaciones en el formato del valor utilizando Notepad ++ para editar el archivo HTML.