Proprietà CSS bottom
- Pagina precedente border-width
- Pagina successiva box-decoration-break
Definizione e uso
L'attributo bottom definisce il margine inferiore dell'elemento. Questa proprietà definisce lo spostamento tra il margine inferiore del bordo esterno dell'elemento posizionato e il margine inferiore del blocco contenente.
Nota:Se il valore dell'attributo position è "static", l'impostazione dell'attributo bottom non ha alcun effetto.
Spiegazione
Per gli elementi statici, è auto; per i valori di lunghezza, è la lunghezza assoluta corrispondente; per i valori percentuali, è il valore specificato; altrimenti è auto.
Per gli elementi definiti relativamente, se both bottom e top sono auto, i loro valori calcolati sono entrambi 0; se uno di essi è auto, si prende il valore opposto dell'altro; se entrambi non sono auto, bottom assume il valore opposto di top.
Vedi anche:
Lezione CSS:Posizionamento CSS
Manuale di riferimento HTML DOM:Attributo bottom
Esempio
Posizionare il margine inferiore dell'immagine 5 pixel sopra il margine inferiore dell'elemento contenente:
img { position:absolute; bottom:5px; }
Sintassi CSS
bottom: auto|length|initial|inherit;
Valore dell'attributo
Valore | Descrizione |
---|---|
auto | Valore predefinito. La posizione inferiore viene calcolata dal browser. |
% | Impostare la posizione inferiore dell'elemento in percentuale rispetto all'elemento contenente. È possibile utilizzare valori negativi. |
length | Impostare la posizione inferiore dell'elemento utilizzando unità come px, cm ecc. È possibile utilizzare valori negativi. |
inherit | Definisce che l'attributo bottom deve essere ereditato dal valore dell'elemento padre. |
Dettagli tecnici
Valore predefinito: | auto |
---|---|
Ereditarietà: | no |
Versione: | CSS2 |
Sintassi JavaScript: | object.style.bottom="50px" |
Altri esempi
- Impostare il margine inferiore dell'immagine utilizzando valori in pixel
- Questo esempio dimostra come impostare il margine inferiore dell'immagine utilizzando valori in pixel.
- Impostare il margine inferiore dell'immagine utilizzando valori percentuali
- Questo esempio dimostra come impostare il margine inferiore dell'immagine utilizzando valori percentuali.
Supporto del browser
I numeri nella tabella indicano la versione del browser iniziale che supporta completamente questa proprietà.
Chrome | IE / Edge | Firefox | Safari | Opera |
---|---|---|---|---|
1.0 | 5.0 | 1.0 | 1.0 | 6.0 |
- Pagina precedente border-width
- Pagina successiva box-decoration-break