Tarayıcıların boşlukları işleme şekli başta çok sezgisel değildir, özellikle de Köprü Metni Biçimlendirme Dilinin boşlukları kelime işlem programlarına göre nasıl işlediğini karşılaştırırsanız. Kelime işlemci yazılımında, belgeye çok sayıda boşluk veya sekme ekleyebilirsiniz ve bu boşluk belge içeriğinin görüntüsüne yansıtılacaktır. Bu WYSIWYG tasarımı, HTML veya web sayfalarında geçerli değildir.
Baskıda Boşluk
Kelime işlemci yazılımında, üç ana boşluk karakteri, Uzay, sekme, ve satırbaşı. Bu karakterlerin her biri farklı bir şekilde hareket eder, ancak HTML'de tarayıcılar hepsini temelde aynı hale getirir. İster bir boşluk koy, ister 100 boşluk koy. HTML işaretlemesi veya aralığınızı sekmeler ve satır başlarıyla karıştırın, bunların tümü sayfa tarafından oluşturulduğunda tek bir boşlukta yoğunlaşacaktır. tarayıcı. Web tasarım terminolojisinde bu, beyaz boşluk çöküşü. Bir web sayfasına boşluk eklemek için bu tipik boşluk tuşlarını kullanamazsınız, çünkü tarayıcı, tarayıcıda işlendiğinde tekrarlanan boşlukları yalnızca bir boşluğa daraltır,
HTML Sekmeleri ve Boşluk Oluşturmak için CSS Kullanma
Günümüzde web siteleri, yapı ve stil ayrımı ile oluşturulmuştur. Bir sayfanın yapısı HTML tarafından işlenirken stil Basamaklı Stil Sayfaları tarafından belirlenir. Boşluk oluşturmak veya belirli bir düzen elde etmek için HTML koduna boşluk karakterleri eklemek yerine CSS'ye dönün.
kullanmaya çalışıyorsanız sekmeler metin sütunları oluşturmak için bunun yerine
Yerleştirdiğiniz veriler tablo verileriyse, bu verileri istediğiniz gibi hizalamak için tabloları kullanın. Tablolar genellikle web tasarımında kötü bir üne sahiptir, çünkü uzun yıllar boyunca saf düzen araçları olarak kötüye kullanıldılar, ancak içeriğiniz gerçekten tablo verileri içeriyorsa tablolar hala mükemmel şekilde geçerlidir.
Kenar Boşlukları, Doldurma ve Metin Girintisi
CSS ile boşluk oluşturmanın en yaygın yolu aşağıdaki CSS stillerinden birini kullanmaktır:
- kenar boşluğu
- dolgu malzemesi
- metin girintisi
Örneğin, aşağıdaki CSS ile bir sekme gibi bir paragrafın ilk satırını girintileyin (bunun, paragrafınızın kendisine eklenmiş bir "ilk" sınıf niteliğine sahip olduğunu varsaydığını unutmayın):
p.ilk {
metin girintisi: 5em;
}
Bu paragrafta yaklaşık beş karakter girinti vardır.
Kenar boşluğu veya dolgu özelliklerini kullanın CSS bir öğenin üstüne, altına, soluna veya sağına (veya bu kenarların kombinasyonlarına) boşluk eklemek için. CSS'ye dönerek ihtiyaç duyulan her türlü aralığı elde edin.
Metni CSS Olmadan Birden Fazla Boşlukta Taşıma
Tek istediğiniz, metninizin önceki öğeden bir boşluktan daha uzağa taşınmasıysa, bölünmeyen boşluğu kullanın.
Bölünemez alanı kullanmak için şunu eklersiniz: HTML işaretlemenizde ihtiyaç duyduğunuz kadar.
HTML, bu bölünmez boşluklara saygı duyar ve bunları tek bir boşlukta daraltmaz. Ancak, bu yaklaşım, yalnızca düzen ihtiyaçlarını karşılamak için bir belgeye fazladan HTML işaretlemesi eklediğinden zayıf bir uygulama olarak kabul edilir. Uygulanabilir olduğunda, istenen yerleşim efektini elde etmek için bölünemez boşluklar eklemekten kaçının ve kullanın CSS kenar boşlukları ve dolgu yerine.