Tab Spasi Alih-alih Beberapa Spasi Non-Breaking (“ ”)?

Tab Spasi Alih Alih Beberapa Spasi Non Breaking Nbsp



Dalam pengembangan web, spasi ditambahkan dalam dokumen HTML dengan memanfaatkan “   ” kode entitas yang juga disebut sebagai ruang tanpa putus. Dalam beberapa kasus, menambahkan beberapa spasi non-breaking dalam dokumen, seperti spasi tab, diperlukan. Oleh karena itu, beberapa “ ” kode entitas dapat mempengaruhi urutan kode dan kerapian dokumen.

Untuk mengatasi masalah ini, ada beberapa cara lain untuk menyertakan beberapa spasi tanpa putus dalam dokumen HTML, seperti “ ”, “ 'elemen, CSS' margin-kiri ”, “ padding-kiri ” properti, dan banyak lagi.

Studi ini akan mengajarkan Anda:





Pertama, kita akan menelusuri contoh yang mengimplementasikan “   ” untuk menambahkan spasi pada dokumen HTML. Kemudian, secara bertahap telusuri ilustrasi untuk mendemonstrasikan berbagai metode untuk menambahkan ruang tab.



Cara Menambahkan Spasi Menggunakan “ ” kode entitas dalam HTML?

Untuk menambahkan spasi menggunakan “   ” di halaman HTML, ikuti langkah-langkah yang disediakan:



  • Tambahkan elemen div dan berikan kelas ' artikel ”.
  • Setelah itu, tempatkan “

    ” untuk judul.

  • Kemudian, tambahkan “

    ” elemen untuk menambahkan paragraf. Pada awal paragraf ditambahkan spasi dengan menunjukkan kode entitas “   ”:

< div kelas = 'artikel' >
< h2 > Pengetahuan adalah kekuatan < / h2 >
< p >     Pengetahuan adalah kekuatan menandakan bahwa seorang terpelajar memiliki kendali penuh atas hidupnya melalui kekuatan pengetahuan. < / p >
< / div >

Terlihat bahwa spasi telah berhasil ditambahkan di awal paragraf:



Bagaimana Cara Menambahkan Tab Space Menggunakan Elemen HTML “”?

HTML-nya ” adalah elemen sebaris yang digunakan untuk menandai bagian dari dokumen. Dalam contoh yang sedang berlangsung, kami telah menambahkan elemen dengan “ tab ' Indo. Elemen ini ditata dalam CSS untuk menghasilkan ruang:



< div kelas = 'artikel' >
< h2 >Pengetahuan adalah kekuatan< / h2 >
< p > < menjangkau Indo = 'tab' >< / menjangkau > Pengetahuan adalah kekuatan menandakan bahwa seorang terpelajar memiliki kendali penuh atas hidupnya melalui pengetahuan kekuatannya.


Div gaya 'artikel'.

.artikel {
margin: otomatis;
lebar : 400px;
padding: 10px;
}

“ .artikel ” digunakan untuk mengakses “

”, yang kemudian diterapkan dengan properti berikut:

  • “ lebar ” properti menentukan lebar elemen.
  • “ batas ” properti menentukan ketinggian elemen.
  • “ lapisan ” menghasilkan ruang di sekitar konten elemen.

Gaya 'tab' id

#tab {
padding-kiri: 8px;
}

“ #tab 'mengakses' tab ” id dari elemen dan menerapkan “ padding-kiri ” properti di atasnya.

Keluaran

Bagaimana Cara Menambahkan Tab Space Menggunakan Elemen HTML “
”?

“ ” elemen mendefinisikan teks yang telah diformat sebelumnya. Teks di dalam elemen 

 ditampilkan di halaman web sebagaimana adanya.


  Tinjau contoh dengan terlebih dahulu membuat halaman HTML:


    

  •   Tambahkan '   
       ” untuk menyetel tajuk tingkat dua ke dokumen.
    • 

  •   Kemudian, tambahkan “      ”, dan tentukan konten dengan pemformatan yang diinginkan:
    • 

  <   h2   > HTML sebelum Tag <  /   h2   > 
  <   pra   > 
  fungsi produkFungsi  (  p1, p2  )   { 
  kembalikan p1 * p2; 
    }  
  <  /   pra   >
   Keluaran  

 


  Bagaimana Cara Menambahkan Tab Space Menggunakan Properti 'margin-left' CSS?


  Untuk menambahkan ruang tab menggunakan CSS “   margin-kiri   ” properti, ikuti prosedur yang disediakan:


    

  •   Pertama, sertakan elemen div ke dokumen dan berikan kelas '   gambar-gambar   ”.
    • 

  •   Di dalam elemen div ini, tambahkan dua elemen div bersama dengan class “   img-1   ' dan '   img-2   ” masing-masing.
    • 

  •   Masing-masing dari dua elemen div ini berisi gambar yang ditentukan menggunakan “       ” tag.
    • 

  •   Ini '       ” tag dikaitkan dengan “   src   ' dan '   lebar   ” atribut. Atribut 'src' menentukan URL gambar, dan atribut 'width' menyesuaikan lebar gambar.
    • 



  Berikut adalah kode HTML dari skenario yang dibahas di atas:
  <   div    kelas  =  'gambar-gambar'  > 
  <   div    kelas  =  'img-1'  > 
  <   img    src  =  '/spring-images/marguerite-flower.jpg'   lebar  =  '250'  > 
  <  /   div   > 
  <   div    kelas  =  'img-2'  > 
  <   img    src  =  '/gambar-musim semi/bunga-ga8f105f1d_1920.jpg'   lebar  =  '250'  > 
  <  /   div   > 
  <  /   div   >
  Halaman HTML akan terlihat seperti ini: 

 


  Mari beralih ke bagian CSS untuk menambahkan banyak spasi ke '   img-2   ” kelas tanpa menggunakan banyak ruang tanpa putus.


   Gaya div 'gambar'. 
  .gambar-gambar  { 
    lebar  : 500px; 
  margin: otomatis; 

  }

  “   .gambar-gambar   ” digunakan untuk mengakses div HTML yang berisi “   gambar-gambar   ' kelas. Penjelasan dari sifat-sifat tersebut di atas adalah sebagai berikut:


    

  •   “   lebar   ” properti menentukan lebar elemen.
    • 

  •   “   batas   ” properti menentukan ruang di sekitar sisi elemen.
    • 



   Gaya div 'img-2'.  
  Akses elemen div menggunakan “   .img-2   ”:
  .img-  2   { 
  margin-kiri: 30px; 

  }

  “   margin-kiri   ” properti dengan “   30px   ” nilai diterapkan ke elemen div HTML yang memiliki kelas “   img-2   ”. Properti ini akan menambah ruang 30px di sebelah kiri elemen.


  Di sini, hasilnya menunjukkan bahwa gambar kedua diterapkan dengan beberapa ruang di awal:


 


  Kami telah menguraikan tentang menambahkan ruang tab alih-alih menggunakan banyak ruang tanpa putus '       ”.


  Kesimpulan


  Dalam HTML, '       ” kode entitas biasanya digunakan untuk menambah ruang tanpa putus dalam dokumen. Untuk menghindari penggunaan kode entitas ini berkali-kali, ada cara lain untuk menambahkan ruang tab di dokumen. Metode ini termasuk penggunaan HTML “      ”, “      ' elemen, '   margin-kiri   ” properti, dan masih banyak lagi. Blog ini telah menyebutkan beberapa cara yang membantu menambahkan ruang tab di dokumen HTML alih-alih menambahkan beberapa “ ” kode entitas.

							
							

							
							

							

							

							  

								 Lainnya

Kategori

Pesan Populer

Apa itu int dalam Pemrograman C, C++, dan C#?

Cara Menggunakan Fungsi PHP str_split()

Solusi Permasalahan Bab 3 Kursus Karir Internet dan Database Ilmu Komputer Online Lengkap dari Awal

Cara Mendesain Progress Bar Responsif Menggunakan HTML, CSS dan JavaScript

CSS – Cara Menghapus Perbatasan Sepenuhnya Dari Tabel HTML

HKEY_USERS | Cara Mencocokkan Profil Pengguna dengan Folder

Cara Menghapus Spasi Putih dalam String di C#

Cara Menghapus Karakter dari String di Arduino Menggunakan Fungsi String.remove()

Apa saja Langkah Membuat Desain Website Responsif dengan HTML dan CSS?

Apa yang dilakukan INSERT ON DUPLICATE KEY UPDATE di MySQL?

Cara Install Node.js dan Npm di Ubuntu 22.04

Cara Mengunggah Tema di WordPress

Bagaimana Menerapkan Logika ReAct untuk Bekerja dengan Penyimpanan Dokumen?

Tutorial Mode Org Emacs

Superkapasitor Grafena

Apa itu std::array di C++?

Kesalahan Pelanggaran Pengawas DPC

Cadangkan Data Raspberry Pi dengan Duplicati

Cara Mengatasi Kesalahan “Operasi Chown Tidak Diizinkan” di Linux

Cara Membuat Div yang Tumpang Tindih Dengan CSS