Bagaimana untuk mencipta ruang tambahan dalam HTML atau laman web

Mewujudkan ruang tambahan dalam HTML anda pada halaman web boleh dicapai banyak cara bergantung pada jenis ruang yang anda ingin buat. Bahagian berikut mengandungi banyak cara yang berbeza untuk membuat ruang tambahan menggunakan kedua-dua HTML dan CSS.

Salah satu perkara yang paling mengelirukan kepada pengguna baru yang mencipta laman web mereka sendiri adalah bahawa mereka tidak boleh menekan bar ruang beberapa kali membuat ruang tambahan. Untuk membuat ruang tambahan sebelum, selepas, atau di antara teks anda, gunakan (ruang tidak pecah) meluaskan watak HTML.

Sebagai contoh, dengan "ruang tambahan" kami mempunyai kod berikut dalam HTML kami.

 ruang tambahan 

Nota: Jika anda menggunakan editor WYSIWYG untuk memasukkan kod di atas, anda mesti berada dalam tab HTML atau mengedit kod HTML.

  • Penyenaraian penuh aksara HTML khas yang dilanjutkan.

Pastikan jarak dalam teks yang disisipkan ke dalam halaman

Jika anda menampal teks dengan ruang atau tab tambahan, anda boleh menggunakan HTML

 tag untuk mengekalkan teks diformat. Berikut ialah contoh cara menampal teks dengan ruang tambahan menggunakan 
 tag.

 Teks ini mempunyai banyak ruang 

Contoh di atas dilakukan menggunakan kod HTML di bawah.

 Teks ini mempunyai banyak ruang 

Nota: Jika anda menggunakan editor WYSIWYG untuk memasukkan kod di atas, anda mesti berada dalam tab HTML atau mengedit kod HTML.

  • Lihat HTML kami
     halaman tag untuk maklumat lanjut mengenai tag ini.

Mewujudkan ruang tambahan di sekeliling elemen atau objek

Mana-mana elemen HTML boleh mempunyai jarak tambahan ditambah ke bahagian atas, kanan, bawah, atau kiri. Walau bagaimanapun, adalah penting untuk anda memahami perbezaan antara margin dan padding sebelum menentukan jenis ruang yang anda mahu tambah di sekeliling elemen atau objek lain. Seperti yang anda dapat lihat dalam gambar di bawah ini, padding adalah apa yang mengelilingi elemen itu segera, di dalam sempadan, dan margin di luar sempadan.

Dalam contoh di bawah, perenggan kami dikelilingi oleh sempadan, diindikasikan dengan margin, dan mempunyai ruang di sebelah kanan dan bawah perenggan.

Contoh perenggan dengan margin dan padding.

Contoh di atas dicipta menggunakan kod di bawah.

Contoh perenggan dengan margin dan padding.

Di bahagian pertama kod, "margin-left: 2.5em;" menambah margin kiri 2.5 em, yang memberikan penampilan teks yang diinden. Seperti yang ditunjukkan oleh contoh, jarak ini berada di luar sempadan. Dalam bahagian seterusnya, "padding: 0 7em 2em 0;" adalah menentukan padding atas, kanan, bawah, dan kiri (mengikut arah jam). Terdapat padding atas "0", "7em" padding kanan, "2em" padding bawah, dan 0 padding kiri. Baki contoh ini menentukan cara perbatasan patut dilihat.

Membuat tab menggunakan CSS dan HTML

Tab boleh dibuat dalam HTML dengan menyesuaikan margin kiri elemen. Sebagai contoh, perenggan ini mempunyai margin kiri 2.5 em dari elemen yang mengandungi teks. CSS untuk mencipta margin kiri ini ditunjukkan di bawah.

 .tab {margin-left: 2.5em} 

Selepas meletakkan kod ini dalam fail CSS kami, kami boleh menggunakan kelas "tab" pada mana-mana teks untuk membuat penampilan tab. Nilai margin-kiri boleh ditingkatkan atau berkurang bergantung kepada keperluan anda.

Walaupun kami mencadangkan kaedah di atas, CSS margin-margin juga boleh ditambah secara linear seperti ditunjukkan dalam contoh di bawah.

Contoh margin 5em kiri.

Contoh margin 5em kiri.

  • Bagaimanakah saya indent atau teks tab pada laman web saya atau dalam HTML?

Jika anda perlu menambah ruang tambahan di bawah garis atau perenggan teks, dan hanya perlu melakukannya sekali, anda boleh menggunakannya

tag untuk menambah ruang tambahan dalam dokumen. Berikut adalah contoh bagaimana teknik ini boleh digunakan.

Kalimat ini mengandungi teks contoh.

Seperti yang dapat anda lihat, dua rehat telah ditambahkan untuk membuat ruang di atas.

Kod di atas akan mencipta teks yang ditunjukkan di bawah.

Kalimat ini mengandungi teks contoh.

Seperti yang dapat anda lihat, dua rehat telah ditambahkan untuk membuat ruang di atas.

Break tambahan boleh ditambah jika perlu. Walau bagaimanapun, kami cadangkan menggunakan kaedah CSS yang disebut tadi untuk menambah padding dan jarak di sekitar teks anda jika dilakukan di beberapa tempat di halaman.