CSS bottom 属性
- halaman sebelumnya border-width
- halaman berikutnya box-decoration-break
Definisi dan penggunaan
Atribut bottom menentukan garis bawah luar margin elemen. Atribut ini mendefinisikan offset antara batas bawah margin eksternal elemen pengiriman dan batas bawah blok pengiriman.
Komentar:Jika nilai atribut position adalah "static", pengaturan atribut bottom tidak akan memicu efek apapun.
Keterangan
Untuk elemen static, adalah auto; untuk nilai panjang, adalah panjang absolut yang relevan; untuk nilai persen, adalah nilai yang ditentukan; lainnya adalah auto.
Untuk elemen yang didefinisikan relatif, jika bottom dan top semua adalah auto, nilai hitungnya semua adalah 0; jika salah satu adalah auto, ambil nilai yang berlawanan dari yang lain; jika kedua-duanya bukan auto, bottom akan mengambil nilai yang berlawanan dari top.
Lihat juga:
Panduan CSS:Pengaturan CSS
Panduan referensi HTML DOM:Atribut bottom
Contoh
Atur garis bawah bagian bawah gambar di atas bagian bawah bagian pengandung 5 piksel tinggi:
img { position:absolute; bottom:5px; }
Grammar CSS
bottom: auto|length|initial|inherit;
Nilai atribut
Nilai | Deskripsi |
---|---|
auto | Nilai default. Lokasi dasar dihitung melalui browser. |
% | Mengatur posisi bawah elemen berdasarkan persen dari luas elemen. Dapat menggunakan nilai negatif. |
length | Mengatur posisi bawah elemen menggunakan unit panjang seperti px, cm, dll. Dapat menggunakan nilai negatif. |
inherit | Menentukan nilai bottom atribut harus diwarisi dari nilai atribut bottom elemen induk. |
Detil teknis
Nilai default: | auto |
---|---|
Inheritsi: | no |
Versi: | CSS2 |
Grammar JavaScript: | object.style.bottom="50px" |
Lebih banyak contoh
- Mengatur garis bawah gambar menggunakan nilai piksel
- Contoh ini menunjukkan bagaimana mengatur garis bawah gambar menggunakan nilai piksel.
- Mengatur garis bawah gambar menggunakan persen
- Contoh ini menunjukkan bagaimana mengatur garis bawah gambar menggunakan persen.
Dukungan browser
Angka di dalam tabel menunjukkan versi pertama browser yang mendukung sifat 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