Attribut bottom CSS

Définition et utilisation

La propriété bottom définit le bord inférieur de l'élément. Cette propriété définit l'offset entre la marge inférieure extérieure de l'élément positionné et la marge inférieure du conteneur.

Remarque :Si la valeur de la propriété position est "static", l'ajustement de la propriété bottom n'a aucun effet.

Description

Pour les éléments statiques, c'est auto ; pour les valeurs en longueur, c'est la longueur absolue correspondante ; pour les valeurs en pourcentage, c'est la valeur spécifiée ; sinon, c'est auto.

Pour les éléments définis en relative, si bottom et top sont tous deux auto, leur valeur calculée est 0 ; si l'un d'eux est auto, la valeur de l'autre est prise à l'inverse ; si les deux ne sont pas auto, bottom prend la valeur opposée de top.

Voir également :

Tutoriel CSS :Positionnement CSS

Manuel de référence HTML DOM :Propriété bottom

Exemple

Placer le bord inférieur de l'image 5 pixels au-dessus du bord inférieur de l'élément conteneur :

img
  {
  position:absolute;
  bottom:5px;
  }

Essayez-le vous-même

Syntaxe CSS

bottom: auto|longueur|initial|hériter;

Valeur de l'attribut

Valeur Description
auto Valeur par défaut. La position inférieure est calculée par le navigateur.
% Définir la position inférieure de l'élément en pourcentage de la largeur de l'élément conteneur. Les valeurs négatives peuvent être utilisées.
longueur Définir la position inférieure de l'élément en utilisant des unités telles que px, cm, etc. Les valeurs négatives peuvent être utilisées.
hériter Définit que la valeur de la propriété bottom doit être héritée de l'élément parent.

Détails techniques

Valeur par défaut : auto
Héritabilité : non
Version : CSS2
Syntaxe JavaScript : object.style.bottom="50px"

Plus d'exemples

Définir la marge inférieure de l'image en pixels
Cet exemple montre comment utiliser une valeur en pixels pour définir la marge inférieure de l'image.
Définir la marge inférieure de l'image en pourcentage
Cet exemple montre comment utiliser un pourcentage pour définir la marge inférieure de l'image.

Prise en charge du navigateur

Les nombres dans le tableau indiquent la première version de navigateur qui prend en charge cette propriété.

Chrome IE / Edge Firefox Safari Opera
1.0 5.0 1.0 1.0 6.0