Atributo bottom CSS
- página anterior ancho del borde
- página siguiente box-decoration-break
Definición y uso
La propiedad bottom especifica el borde inferior del elemento. Esta propiedad define el desplazamiento de la márgen inferior del borde exterior del elemento de posición con el borde inferior del contenedor.
Notas:Si el valor del atributo "position" es "static", la configuración de la propiedad "bottom" no tendrá ningún efecto.
Descripción
Para elementos estáticos, es auto; para valores de longitud, es la longitud absoluta correspondiente; para valores en porcentaje, es el valor especificado; de lo contrario, es auto.
Para elementos definidos en relativo, si bottom y top son auto, sus valores calculados son 0; si uno de ellos es auto, se toma el opuesto del otro valor; si ambos no son auto, bottom toma el opuesto del valor de top.
Véase también:
Tutoriales de CSS:CSS Posicionamiento
Manual de referencia de HTML DOM:Propiedad bottom
Ejemplo
Establece el borde inferior de la imagen en una posición 5 píxeles superior a la del borde inferior del contenedor:
img { position:absolute; bottom:5px; }
Sintaxis de CSS
bottom: auto|longitud|initial|inherit;
Valor del atributo
Valor | Descripción |
---|---|
auto | Valor por defecto. La posición inferior se calcula mediante el navegador. |
% | Configura la posición del borde inferior del elemento en porcentajes del ancho del contenedor. Se pueden usar valores negativos. |
longitud | Configura la posición del borde inferior del elemento utilizando unidades como px, cm, etc. Se pueden usar valores negativos. |
inherit | Define que el valor de la propiedad bottom debe ser heredado del elemento padre. |
Detalles técnicos
Valor por defecto: | auto |
---|---|
Herencia: | no |
Versión: | CSS2 |
Sintaxis de JavaScript: | object.style.bottom="50px" |
Más ejemplos
- Configuración del borde inferior de la imagen con valores en píxeles
- Este ejemplo muestra cómo configurar el borde inferior de la imagen utilizando valores en píxeles.
- Configuración del borde inferior de la imagen con porcentajes
- Este ejemplo muestra cómo configurar el borde inferior de la imagen utilizando porcentajes.
Compatibilidad del navegador
Los números en la tabla indican la primera versión del navegador que admite completamente esta propiedad.
Chrome | IE / Edge | Firefox | Safari | Opera |
---|---|---|---|---|
1.0 | 5.0 | 1.0 | 1.0 | 6.0 |
- página anterior ancho del borde
- página siguiente box-decoration-break