Lihat bagaimana ruang putih dalam HTML dilayan oleh penyemak imbas
Jika anda seorang pereka web permulaan, salah satu daripada banyak perkara yang anda perlu faham awal adalah cara ruang putih dalam kod tapak ditangani oleh pelayar web.
Malangnya, cara pelayar menangani ruang putih tidak begitu intuitif pada mulanya, terutamanya jika anda masuk ke HTML dan membandingkannya dengan bagaimana ruang putih ditangani dalam program pemprosesan kata, yang mana anda mungkin lebih akrab dengannya.
Dalam perisian pemproses kata, anda boleh menambah banyak jarak atau tab dalam dokumen dan jarak tersebut akan ditunjukkan dalam paparan kandungan dokumen. Ini tidak berlaku dengan HTML atau dengan laman web. Oleh itu, belajar bagaimana ruang putih sebenarnya, dikendalikan oleh pelayar web adalah sangat penting.
Spasi di Cetak
Dalam perisian pemproses kata, tiga aksara ruang putih utama ialah ruang, tab, dan kembali kereta. Setiap perbuatan ini mempunyai cara tersendiri, tetapi dalam HTML, penyemak imbas menjadikan mereka semua pada dasarnya sama. Sama ada anda meletakkan satu ruang atau 100 ruang dalam markup HTML anda, atau mencampurkan jarak anda dengan tab dan kembali kereta, semua ini akan dikurangkan ke satu ruang apabila halaman diberikan oleh penyemak imbas. Dalam istilah reka bentuk web, ini dikenali sebagai runtuhan ruang putih. Anda tidak boleh menggunakan kekunci ruang biasa ini untuk menambah ruang kosong dalam laman web kerana penyemak imbas telah merenggangkan beberapa ruang ke dalam satu ruang apabila diberikan dalam penyemak imbas,
Kenapa Seseorang Menggunakan Tab?
Biasanya, apabila orang menggunakan tab dalam dokumen teks, mereka menggunakannya untuk alasan susun atur atau untuk mendapatkan teks untuk dipindahkan ke tempat tertentu atau menjadi jarak tertentu dari elemen lain. Dalam reka bentuk web, anda tidak boleh menggunakan watak-watak yang disebutkan di atas untuk mencapai gaya visual atau keperluan susun atur.
Dalam reka bentuk web, penggunaan aksara jarak tambahan dalam kod itu semata-mata untuk memudahkan membaca kod itu. Pereka dan pemaju web sering menggunakan tab untuk kod indent supaya mereka dapat melihat unsur mana yang menjadi anak dari elemen lain - tetapi indent tersebut tidak mempengaruhi tata letak visual halaman itu sendiri. Bagi mereka yang memerlukan perubahan susun atur visual, anda perlu beralih ke CSS (sheets style cascading).
Menggunakan CSS untuk Membuat Tab HTML dan Spasi
Laman web hari ini dibina dengan pemisahan struktur dan gaya. Struktur halaman dikendalikan oleh HTML manakala gaya ditentukan oleh CSS. Ini bermakna untuk membuat jarak atau mencapai susun atur tertentu, anda perlu bertukar kepada CSS dan tidak cuba menambah aksara jarak sahaja ke kod HTML.
Jika anda cuba menggunakan tab untuk membuat lajur teks, anda boleh menggunakan
Jika data yang anda layari adalah data jadual, anda boleh menggunakan jadual untuk menjajarkan data yang anda suka. Jadual sering mendapat rap buruk dalam reka bentuk web kerana mereka telah disalahgunakan sebagai alat susun atur tulen selama bertahun-tahun, tetapi jadual masih sah jika kandungan anda mengandungi data jadual yang disebutkan di atas.
Margin, Padding, dan Indent Teks
Cara paling umum untuk membuat jarak dengan CSS adalah dengan menggunakan salah satu gaya CSS berikut:
- margin
- padding
- indent teks
Contohnya, anda boleh indent baris pertama perenggan seperti tab dengan CSS berikut (perhatikan bahawa ini mengandaikan perenggan anda mempunyai atribut kelas "pertama" yang dilampirkan kepadanya):
p.first {
teks-indent: 5em;
}
Perenggan ini sekarang akan diinden tentang 5 aksara.
Anda juga boleh menggunakan margin atau padding properties dalam CSS untuk menambah jarak ke bahagian atas, bawah, kiri, atau kanan (atau kombinasi dari sisi) elemen. Pada akhirnya, anda boleh mencapai apa-apa jenis jarak yang diperlukan dengan beralih ke CSS.
Memindahkan Teks Lebih daripada Satu Ruang Tanpa CSS
Jika semua yang anda mahukan adalah untuk teks anda akan dialihkan lebih daripada satu ruang jauh dari item sebelumnya, anda boleh menggunakan ruang yang tidak pecah.
Untuk menggunakan ruang yang tidak pecah, anda hanya menambah & nbsp; seberapa banyak yang anda perlukan dalam markup HTML anda.
Sebagai contoh, jika anda ingin memindahkan perkataan anda lima ruang, anda boleh menambah yang berikut sebelum perkataan.
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp;HTML menghormati ini dan tidak akan meruntuhkannya ke ruang tunggal. Walau bagaimanapun, ini dianggap sebagai amalan yang sangat miskin kerana ia menambah markup HTML tambahan kepada dokumen hanya untuk mencapai keperluan susun atur. Merujuk kepada pemisahan struktur dan gaya, anda harus mengelakkan menambah ruang yang tidak pecah hanya untuk mencapai kesan susun atur yang diingini dan harus menggunakan margin CSS dan padding sebaliknya.