Cara Melukis Garisan Vertikal untuk Memisahkan Teks HTML Dari Gambar

HTML tidak memberikan penyelesaian yang bersih untuk garis menegak seperti yang dilakukan untuk garis mendatar - tegak setara dengan teg tidak ada. Sekiranya anda ingin menyiapkan laman web perniagaan anda agar terdapat persempadanan antara teks dan gambar, anda boleh menggunakan CSS untuk membuat sempadan sederhana. Sempadan boleh mengelilingi keseluruhan gambar, atau anda boleh memaparkan sempadan di satu sisi. Anda juga boleh menggunakan CSS untuk mengapung gambar, membuat teks terbungkus.

1

Tetapkan gambar anda dalam teks anda dan tambahkan tag atribut "style". Contohnya, kod HTML untuk gambar anda mungkin kelihatan seperti ini:

2

Tentukan sempadan dalam atribut "style". Sebagai contoh, jika anda mahu sempadan berlaku pada keseluruhan gambar, CSS akan kelihatan seperti ini:

Ini adalah tetapan sempadan pendek - nilai pertama menetapkan lebar sempadan, yang kedua menentukan jenis sempadan dan yang ketiga menetapkan warna. Sempadan boleh menjadi padat, bertitik, putus-putus atau berganda; atau anda boleh menentukan sempadan 3-D seperti alur, rabung, sisipan atau awal.

Sekiranya anda ingin menerapkan sempadan hanya pada satu sisi untuk membuat garis menegak yang sebenarnya, anda akan menggunakan "border-left" atau "border-right" dan bukan "border."

3

Tambahkan padding untuk membuat beberapa ruang antara gambar dan teks anda. Sekiranya anda mahu sempadan berjarak 5 piksel dari gambar, tambahkan "padding: 5px;" ke tanda gaya anda. Anda boleh menentukan padding hanya pada satu sisi dengan menggunakan, misalnya, "padding-left: 5px;". Sekiranya anda ingin membuat ruang antara sempadan dan teks, gunakan margin. Anda juga perlu menentukan URL gambar anda untuk tag "src". Apabila anda mengumpulkan semuanya, kod anda akan kelihatan seperti ini:

4

Simpan dan uji HTML anda untuk mengesahkan bahawa sempadan muncul seperti yang anda mahukan.