Buat ruang dan pemisahan fizikal unsur dalam HTML dengan CSS
Mewujudkan ruang dan pemisahan fizikal unsur-unsur dalam HTML boleh sukar difahami untuk pereka web permulaan. Ini kerana HTML mempunyai hak milik yang dikenali sebagai "ruang kosong runtuh." sama ada anda menaip 1 ruang atau 100 dalam kod HTML anda, penyemak imbas web secara automatik runtuh ruang tersebut ke satu ruang tunggal. Ini berbeza dengan program seperti Microsoft Word , yang membolehkan pencipta dokumen menambah banyak ruang untuk memisahkan kata-kata dan elemen lain dalam dokumen itu.
Ini bukan bagaimana jarak reka bentuk laman web berfungsi.
Jadi, bagaimana anda menambah ruang kosong dalam HTML yang dipaparkan di halaman web ? Artikel ini mengkaji beberapa cara yang berbeza.
Ruang dalam HTML dengan CSS
Cara pilihan untuk menambah ruang dalam HTML anda ialah dengan Lembaran Gaya Cascading (CSS) . CSS harus digunakan untuk menambah sebarang aspek visual dari laman web, dan kerana jarak adalah sebahagian daripada ciri-ciri reka bentuk visual halaman, CSS adalah di mana anda ingin ini dilakukan.
Dalam CSS, anda boleh menggunakan sama ada margin atau padding properties untuk menambah ruang di sekitar unsur. Di samping itu, sifat indeks teks menambah ruang ke bahagian depan teks, seperti untuk mengindikasikan perenggan.
Berikut ialah contoh bagaimana menggunakan CSS untuk menambah ruang di hadapan semua perenggan anda. Tambah CSS berikut untuk helaian luaran atau dalaman anda :
p {
teks: 3em;
}
Ruang dalam HTML: Di dalam Teks Anda
Jika anda hanya mahu menambahkan ruang atau dua tambahan kepada teks anda, anda boleh menggunakan ruang yang tidak pecah.
Watak ini bertindak seperti watak ruang piawai, hanya ia tidak runtuh di dalam penyemak imbas.
Berikut adalah contoh cara menambah lima ruang di dalam baris teks:
Teks ini mempunyai lima ruang tambahan di dalamnya
Menggunakan HTML:
Teks ini mempunyai & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; lima ruang tambahan di dalamnya
Anda juga boleh menggunakan tag dalam bahasa untuk menambah pecutan baris tambahan.
Kalimat ini mempunyai lima baris istirahat pada akhirnya
Mengapa Spasi dalam HTML adalah Ide Bad
Walaupun pilihan ini kedua-duanya berfungsi - elemen ruang yang tidak pecah sesungguhnya akan menambahkan jarak pada teks anda dan rehat baris akan menambah jarak di bawah perenggan yang ditunjukkan di atas - ini bukan cara terbaik untuk membuat jarak di halaman web anda. Menambah unsur-unsur ini ke HTML anda menambah maklumat visual kepada kod dan bukan memisahkan struktur halaman (HTML) dari gaya visual (CSS). Amalan terbaik menentukan bahawa ini harus berasingan bagi beberapa sebab, termasuk kemudahan mengemaskini pada masa depan dan keseluruhan saiz fail dan prestasi halaman.
Jika anda menggunakan lembaran gaya luaran untuk menentukan semua gaya dan jarak anda, maka mengubah gaya tersebut untuk keseluruhan tapak mudah dilakukan, kerana anda hanya perlu mengemas kini satu helaian gaya.
Pertimbangkan contoh di atas kalimat dengan lima tag pada akhirnya. Jika anda menginginkan jumlah jarak di bahagian bawah setiap perenggan, anda perlu menambah kod HTML untuk setiap perenggan di seluruh tapak anda. Itulah markah tambahan yang adil yang akan mengalir halaman anda.
Di samping itu, jika anda memutuskan di jalan raya bahawa jarak ini terlalu banyak atau terlalu kecil, dan anda ingin menukarnya sedikit, anda perlu mengedit setiap perenggan di seluruh laman web anda. Tidak terima kasih!
Daripada menambah elemen jarak kepada kod anda, gunakan CSS.
p {
padding-bottom: 20px;
}
Bahawa satu baris CSS akan menambah jarak di bawah perenggan halaman anda. Sekiranya anda mahu mengubah ruang itu pada masa hadapan, edit satu baris ini (bukan kod keseluruhan laman anda) dan anda pasti pergi!
Sekarang, jika anda perlu menambah ruang tunggal dalam satu bahagian laman web anda, menggunakan tag
atau ruang tidak pecah tunggal bukan akhir dunia, tetapi anda perlu berhati-hati.
Menggunakan pilihan jarak HTML inline ini boleh menjadi cerun yang licin. Walaupun satu atau dua mungkin tidak menyakiti laman web anda, jika anda meneruskan jalan itu, anda akan memperkenalkan masalah ke dalam halaman anda. Pada akhirnya, anda lebih baik beralih kepada CSS untuk jarak HTML, dan semua keperluan visual halaman web yang lain.