Pelajari cara membuat teks membungkus gambar melayang dengan CSS.
Untuk membuat teks Anda membungkus gambar di sebelah kanan, mirip dengan foto yang memperkenalkan artikel ini, gunakan aturan CSS seperti ini:
Aturan float: left membuat gambar bergerak ke margin kiri. Aturan padding-right menjaga teks agar tidak menabrak sisi kanan gambar. Jika perbatasan ditambahkan ke gambar ini, padding akan datang antara gambar dan perbatasan. Lihat Bagian 2 untuk bekerja dengan gambar dengan batas.
Selanjutnya, tambahkan margin ke kiri dan kanan gambar untuk memusatkannya. Nilai yang tepat untuk margin kiri dan kanan untuk memusatkan apa pun adalah otomatis.
Untuk membuat batas tebal seperti bingkai menggunakan gaya batas alur, aturan seperti ini dapat digunakan:
Gaya perbatasan lainnya adalah solid, dotted, dashed, double, ridge, inset, dan outset. Lebar dapat dinyatakan dalam piksel, em, atau persentase.
Batas dapat diterapkan secara selektif ke bagian atas, kanan, bawah dan kiri gambar. Anda dapat menggunakan pengetahuan ini untuk membuat efek seperti bayangan jatuh.
Menggunakan batas solid dalam 2 warna abu-abu di batas kanan dan bawah, Anda mendapatkan efek bayangan jatuh.
img { float: kiri; gaya perbatasan-kanan: padat; batas-kanan-lebar: 8px; border-right-color: #CCCCCC; border-bottom-style: solid; batas-bawah-lebar: 8px; border-bottom-color: #999999; margin-kanan: 1em; margin-bawah: 1em; }
Tip
Jika Anda memiliki gambar di lebih dari satu divisi (div) halaman, gunakan pemilih turunan untuk menatanya satu per satu. Kemungkinan pemilih: #content img, #sidebar img, #feature img.
