Properti bottom CSS
- Halaman sebelumnya border-width
- Halaman berikutnya box-decoration-break
Definisi dan penggunaan
Properti bottom menentukan pinggir bawah elemen. Properti ini menentukan jarak antara batas bawah marjin eksternal elemen yang dialokasikan dan batas bawah blok yang dihubungkan.
Catatan:Jika nilai properti "position" adalah "static", pengaturan properti "bottom" tidak akan menghasilkan efek apapun.
Keterangan
Untuk elemen statis, gunakan auto; untuk nilai panjang, gunakan panjang yang seharusnya; untuk nilai persen, gunakan nilai yang ditentukan; jika tidak, gunakan auto.
Untuk elemen yang didefinisikan relatif, jika bottom dan top semua adalah auto, nilai mereka semua adalah 0; jika salah satu adalah auto, ambil nilai yang sebaliknya; jika kedua-duanya bukan auto, bottom akan mengambil nilai yang sebaliknya top.
Lihat juga:
Pelajaran CSS:Posisi CSS
Panduan HTML DOM:Properti bottom
Contoh
Atur pinggir bawah gambar di posisi 5 pixel di atas pinggir bawah elemen penghubung:
img { position:absolute; bottom:5px; }
Syntax CSS
bottom: auto|length|initial|inherit;
Nilai properti
Nilai | Deskripsi |
---|---|
auto | Nilai default. Lokasi bawah dihitung oleh browser. |
% | Mengatur posisi bawah elemen berdasarkan persen dari tinggi elemen. Dapat menggunakan nilai negatif. |
length | Mengatur posisi bawah elemen menggunakan satuan seperti px, cm. Dapat menggunakan nilai negatif. |
inherit | Mengatur nilai bottom properti yang seharusnya diwarisi dari elemen induk. |
Detil teknis
Nilai default: | auto |
---|---|
Inheritance: | no |
Versi: | CSS2 |
Syntax JavaScript: | object.style.bottom="50px" |
Beberapa contoh lainnya
- Mengatur bawah pinggir gambar menggunakan nilai piksel
- Contoh ini menunjukkan bagaimana mengatur bawah pinggir gambar menggunakan nilai piksel.
- Mengatur bawah pinggir gambar menggunakan persen
- Contoh ini menunjukkan bagaimana mengatur bawah pinggir gambar menggunakan persen.
Dukungan browser
Angka di tabel menunjukkan versi pertama browser yang mendukung properti ini penuh.
Chrome | IE / Edge | Firefox | Safari | Opera |
---|---|---|---|---|
1.0 | 5.0 | 1.0 | 1.0 | 6.0 |
- Halaman sebelumnya border-width
- Halaman berikutnya box-decoration-break