Buat spasi dan pemisahan fisik elemen dalam HTML dengan CSS
Membuat ruang dan pemisahan fisik elemen dalam HTML dapat sulit dipahami untuk perancang web awal. Ini karena HTML memiliki properti yang dikenal sebagai "rangkuman whitespace." apakah Anda mengetikkan 1 ruang atau 100 dalam kode HTML Anda, browser web secara otomatis menciutkan ruang tersebut menjadi hanya satu ruang tunggal. Ini berbeda dari program seperti Microsoft Word , yang memungkinkan pembuat dokumen menambahkan beberapa spasi untuk memisahkan kata dan elemen lain dari dokumen itu.
Ini bukan bagaimana cara kerja desain situs web.
Jadi, bagaimana Anda menambahkan spasi putih dalam HTML yang muncul di halaman web ? Artikel ini membahas beberapa cara berbeda.
Spasi dalam HTML dengan CSS
Cara yang disukai untuk menambah spasi di HTML Anda adalah dengan Cascading Style Sheets (CSS) . CSS harus digunakan untuk menambahkan aspek visual apa pun dari suatu halaman web, dan karena jarak adalah bagian dari karakteristik desain visual dari suatu halaman, CSS adalah tempat Anda ingin ini dilakukan.
Dalam CSS, Anda dapat menggunakan properti margin atau padding untuk menambah ruang di sekitar elemen. Selain itu, properti teks-indent menambahkan ruang ke bagian depan teks, seperti untuk indentasi paragraf.
Berikut ini contoh cara menggunakan CSS untuk menambah ruang di depan semua paragraf Anda. Tambahkan CSS berikut ke style sheet eksternal atau internal Anda :
p {
text-indent: 3em;
}
Spasi dalam HTML: Di dalam Teks Anda
Jika Anda hanya ingin menambahkan ruang tambahan atau dua ke teks Anda, Anda dapat menggunakan ruang non-breaking.
Karakter ini bertindak seperti karakter ruang standar, hanya saja tidak runtuh di dalam browser.
Berikut ini contoh cara menambahkan lima spasi di dalam baris teks:
Teks ini memiliki lima ruang tambahan di dalamnya
Menggunakan HTML:
Teks ini & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; lima ruang ekstra di dalamnya
Anda juga dapat menggunakan tag
untuk menambahkan jeda baris tambahan.
Kalimat ini memiliki lima jeda baris di bagian akhir.
Mengapa Spasi dalam HTML adalah Ide Buruk
Meskipun kedua opsi ini berfungsi - elemen non-breaking spaces memang akan menambah jarak ke teks Anda dan jeda baris akan menambah jarak di bawah paragraf yang ditunjukkan di atas - ini bukan cara terbaik untuk membuat jarak di halaman web Anda. Menambahkan elemen-elemen ini ke HTML Anda akan menambah informasi visual ke kode alih-alih memisahkan struktur halaman (HTML) dari gaya visual (CSS). Praktik terbaik menentukan bahwa ini harus terpisah karena sejumlah alasan, termasuk kemudahan pembaruan di masa depan dan ukuran file secara keseluruhan dan kinerja halaman.
Jika Anda menggunakan lembar gaya eksternal untuk menentukan semua gaya dan jarak Anda, maka mengubah gaya tersebut untuk seluruh situs mudah dilakukan, karena Anda hanya perlu memperbarui satu lembar gaya tersebut.
Pertimbangkan contoh di atas kalimat dengan lima tag pada akhir. Jika Anda menginginkan jumlah spasi di bagian bawah setiap paragraf, Anda perlu menambahkan kode HTML itu ke setiap paragraf di seluruh situs Anda. Itu adalah jumlah ekstra markup yang adil yang akan mengembang halaman Anda.
Selain itu, jika Anda memutuskan bahwa jaraknya terlalu jauh atau terlalu sedikit, dan Anda ingin mengubahnya sedikit, Anda perlu mengedit setiap paragraf di seluruh situs web Anda. Tidak terima kasih!
Daripada menambahkan elemen spasi ini ke kode Anda, gunakan CSS.
p {
padding-bottom: 20px;
}
Satu baris CSS akan menambahkan jarak di bawah paragraf halaman Anda. Jika Anda ingin mengubah jarak itu di masa depan, edit satu baris ini (bukan seluruh kode situs Anda) dan Anda siap untuk pergi!
Sekarang, jika Anda perlu menambahkan satu ruang di salah satu bagian dari situs web Anda, menggunakan tag
atau satu ruang non-breaking bukanlah akhir dari dunia, tetapi Anda harus berhati-hati.
Menggunakan opsi pengaturan HTML inline ini bisa menjadi lereng yang licin. Meskipun satu atau dua situs mungkin tidak melukai situs Anda, jika Anda melanjutkan ke jalur itu, Anda akan memasukkan masalah ke halaman Anda. Pada akhirnya, Anda lebih baik beralih ke CSS untuk jarak HTML, dan semua kebutuhan visual halaman web lainnya.