Cara browser menangani ruang putih pada awalnya tidak terlalu intuitif, terutama jika Anda membandingkan bagaimana Hypertext Markup Language menangani ruang putih relatif terhadap program pengolah kata. Dalam perangkat lunak pengolah kata, Anda dapat menambahkan banyak spasi atau tab dalam dokumen dan spasi itu akan tercermin dalam tampilan konten dokumen. Desain WYSIWYG ini tidak berlaku untuk HTML atau halaman web.
Spasi di Cetak
Dalam perangkat lunak pengolah kata, tiga karakter spasi utama adalah: ruang, tab, dan Kereta kembali. Masing-masing karakter ini bertindak dengan cara yang berbeda, tetapi dalam HTML, browser membuat semuanya pada dasarnya sama. Apakah Anda menempatkan satu spasi atau 100 spasi di markup HTML atau campur spasi Anda dengan tab dan carriage return, semua ini akan diringkas menjadi satu spasi saat halaman dirender oleh peramban. Dalam terminologi desain web, ini dikenal sebagai ruang putih runtuh white. Anda tidak dapat menggunakan tombol spasi tipikal ini untuk menambahkan spasi di halaman web karena browser menciutkan spasi berulang menjadi hanya satu spasi saat dirender di browser,
Menggunakan CSS untuk Membuat Tab dan Spasi HTML
Situs web saat ini dibangun dengan pemisahan struktur dan gaya. Struktur halaman ditangani oleh HTML sedangkan gaya ditentukan oleh Cascading Style Sheets. Untuk membuat spasi atau mencapai tata letak tertentu, beralihlah ke CSS alih-alih menambahkan karakter spasi ke kode HTML.
Jika Anda mencoba menggunakan tab untuk membuat kolom teks, alih-alih gunakan
Jika data yang Anda susun adalah data tabular, gunakan tabel untuk menyelaraskan data tersebut sesuai keinginan Anda. Tabel sering mendapatkan reputasi buruk dalam desain web karena disalahgunakan sebagai alat tata letak murni selama bertahun-tahun, tetapi tabel masih valid jika konten Anda benar-benar berisi data tabular.
Margin, Padding, dan Text-Indent
Cara paling umum untuk membuat spasi dengan CSS adalah dengan menggunakan salah satu gaya CSS berikut:
- batas
- lapisan
- indentasi teks
Misalnya, indentasi baris pertama paragraf seperti tab dengan CSS berikut (perhatikan bahwa ini mengasumsikan paragraf Anda memiliki atribut kelas "pertama" yang melekat padanya):
hal.pertama {
indentasi teks: 5em;
}
Paragraf ini menjorok sekitar lima karakter.
Gunakan properti margin atau padding di CSS untuk menambahkan spasi ke atas, bawah, kiri, atau kanan (atau kombinasi dari sisi-sisi itu) dari suatu elemen. Capai segala jenis spasi yang dibutuhkan dengan beralih ke CSS.
Memindahkan Teks Lebih dari Satu Spasi Tanpa CSS
Jika semua yang Anda inginkan adalah teks Anda dipindahkan lebih dari satu spasi dari item sebelumnya, gunakan spasi tanpa putus.
Untuk menggunakan ruang non-breaking, Anda menambahkan sebanyak yang Anda butuhkan di markup HTML Anda.
HTML menghormati ruang yang tidak melanggar ini dan tidak akan menciutkannya ke satu ruang. Namun, pendekatan ini dianggap sebagai praktik yang buruk karena menambahkan markup HTML tambahan ke dokumen hanya untuk memenuhi kebutuhan tata letak. Jika memungkinkan, hindari menambahkan ruang tanpa henti hanya untuk mencapai efek dan penggunaan tata letak yang diinginkan Margin dan bantalan CSS CSS sebagai gantinya.