Birden Fazla Bölünemez Boşluk (' ') Yerine Sekme Boşluğu?

Birden Fazla Bolunemez Bosluk Nbsp Yerine Sekme Boslugu



Web geliştirmede, boşluklar HTML belgelerine “ kullanılarak eklenir.   Bölünemez boşluk olarak da adlandırılan varlık kodu. Bazı durumlarda, belgeye sekme alanı gibi birden çok bölünemez boşluk eklemek gerekir. Bu nedenle, birden fazla “ ” varlık kodları, belgenin kod sırasını ve düzgünlüğünü etkileyebilir.

Bu sorunların üstesinden gelmek için, HTML belgesine birden çok bölünemez boşluk eklemenin ' gibi başka yolları da vardır.

   ”, “       ' öğeler, CSS '   sol kenar boşluğu   ”, “   sol dolgu   ” özellikler ve çok daha fazlası.

Bu çalışma size şunları öğretecek:







İlk olarak, “uygulayan bir örnek üzerinden yürüyeceğiz”   ” HTML belgesine boşluk eklemek için. Ardından, sekme alanı eklemeye yönelik farklı yöntemleri göstermek için yavaş yavaş çizimleri gözden geçirin.



“ ” Kullanarak Boşluk Ekleme HTML'de varlık kodu?

“ kullanarak boşluk eklemek için   ” HTML sayfasında verilen adımları izleyin:



  • Bir div öğesi ekleyin ve ona bir sınıf atayın ' makale ”.
  • Bundan sonra, bir “

    Başlık için ” öğesi.

  • Ardından, “

    ” öğesi bir paragraf eklemek için. Paragrafın başında “varlık kodu” belirtilerek boşluklar eklenir.   ”:

< div sınıf = 'makale' >
< h2 > Bilgi Güçtür < / h2 >
< p >     Bilgi güçtür, eğitimli bir insanın bilginin gücü sayesinde hayatı üzerinde tam kontrole sahip olduğu anlamına gelir. < / p >
< / div >

Paragrafın başında boşlukların başarıyla eklendiği görülmektedir:





HTML “” Öğesini Kullanarak Sekme Alanı Nasıl Eklenir?

HTML' ”, bir belgenin bir bölümünü işaretlemek için kullanılan satır içi bir öğedir. Devam eden örnekte, öğesini “ ile ekledik. sekme kimlik. Bu öğe, alan oluşturmak için CSS'de biçimlendirilmiştir:



< div sınıf = 'makale' >
< h2 >Bilgi güçtür< / h2 >
< p > < açıklık İD = 'sekme' >< / açıklık > Bilgi güçtür, eğitimli bir adamın bilgi yoluyla hayatı üzerinde tam kontrole sahip olduğu anlamına gelir adlı kullanıcının gücü.


Stil 'makale' div

.makale {
marj: araba;
Genişlik : 400 piksel;
dolgu: 10 piksel;
}

.makale ”, “ öğesine erişmek için kullanılır.

” etiketleri, daha sonra aşağıdaki özelliklerle uygulanır:

  • Genişlik ” özelliği, elemanın genişliğini belirler.
  • marj ” özelliği, elemanın yüksekliğini belirler.
  • dolgu malzemesi ” öğesinin içeriğinin etrafında boşluk oluşturur.

Stil 'sekme' kimliği

#sekme {
sol dolgu: 8px;
}

#sekme ' Erişmek ' sekme öğesinin kimliği ve ' sol dolgu ”Üzerindeki mülk.

Çıktı

HTML “
” Öğesini Kullanarak Sekme Alanı Nasıl Eklenir?

   ” öğesi, önceden biçimlendirilmiş metni tanımlar. 
 öğesinin içindeki metin web sayfasında olduğu gibi görüntülenir.

Önce HTML sayfasını oluşturarak örneği gözden geçirin:

  • Ekle '

    Belgeye ikinci düzey bir başlık ayarlamak için ” öğesi.

  • Ardından, “
       ” etiketini seçin ve içeriği istediğiniz biçimlendirmeyle belirtin:
< h2 >HTML ön Etiketi< / h2 >
< öncesi >
işlev ürünFonksiyon ( p1, p2 ) {
dönüş p1 * p2;
}
< / ön >

Çıktı

CSS “margin-left” Özelliğini Kullanarak Sekme Alanı Nasıl Eklenir?

CSS kullanarak sekme alanı eklemek için “ sol kenar boşluğu ” özelliği, sağlanan prosedürü izleyin:

  • İlk olarak, belgeye bir div öğesi ekleyin ve ona bir sınıf atayın ' Görüntüler ”.
  • Bu div öğesinin içine, ' sınıfıyla birlikte iki div öğesi daha ekleyin. img-1 ' ve ' img-2 ' sırasıyla.
  • Bu iki div öğesinin her biri, “ kullanılarak belirtilen görüntüleri içerir. ' etiket.
  • Bunlar ' ” etiketleri “ ile ilişkilidir. kaynak ' ve ' Genişlik ' Öznitellikler. 'src' özelliği görüntünün URL'sini belirtir ve 'width' özelliği görüntünün genişliğini ayarlar.

İşte yukarıda tartışılan senaryonun HTML kodu:

< div sınıf = 'Görüntüler' >
< div sınıf = 'img-1' >
< img kaynak = '/bahar-resimleri/marguerite-çiçek.jpg' Genişlik = '250' >
< / div >
< div sınıf = 'img-2' >
< img kaynak = '/bahar-resimleri/çiçek-ga8f105f1d_1920.jpg' Genişlik = '250' >
< / div >
< / div >

HTML sayfası şöyle görünecektir:

“” alanına birden çok boşluk eklemek için CSS bölümüne doğru ilerleyelim. img-2 ” sınıfı, birden çok bölünemez boşluk kullanmadan.

Stil 'görüntüler' div

.Görüntüler {
Genişlik : 500 piksel;
kenar boşluğu: otomatik;
}

.Görüntüler ” içeren HTML div'ine erişmek için kullanılır. Görüntüler ' sınıf. Yukarıda belirtilen özelliklerin açıklaması şu şekildedir:

  • Genişlik ” özelliği, elemanın genişliğini belirler.
  • marj ” özelliği, elemanın kenarlarındaki boşluğu belirler.

Stil “img-2” div
“ kullanarak div öğesine erişin .img-2 ”:

.img- 2 {
sol kenar boşluğu: 30 piksel;
}

sol kenar boşluğu ” ile mülk 30 piksel ” değeri, “ sınıfına sahip HTML div öğesine uygulanır. img-2 ”. Bu özellik, öğenin soluna 30px boşluk ekleyecektir.

Burada sonuç, ikinci görüntünün başlangıçta biraz boşluk bırakılarak uygulandığını gösterir:

Birden fazla bölünemez boşluk kullanmak yerine sekme boşlukları eklemeyi detaylandırdık”   ”.

Çözüm

HTML'de '   ” varlık kodu, belgede bölünemez boşluk eklemek için yaygın olarak kullanılır. Bu varlık kodunu birden çok kez kullanmaktan kaçınmak için, bir belgeye sekme alanı eklemenin başka yolları da vardır. Bu yöntemler HTML kullanımını içerir “

   ”, “       ' elementler, '   sol kenar boşluğu   ” mülk ve daha fazlası. Bu blog, birden çok ' ' eklemek yerine HTML belgesine sekme boşlukları eklemeye yardımcı olan birkaç yoldan bahsetmiştir. varlık kodları.