parentDiv {

Beyaz alan hatası, web tasarımcıları için büyük bir sorun olabilir.

1. Adım

Her sorunlu Div için kenar boşluğu ayarını analiz edin. Boş alanın her iki tarafındaki Boşlukların boş alanı oluşturan bir kenar boşluğu ayarına sahip olmadığından emin olun. Her bir Div'un payı, bunun dışındaki alandadır. Sizinki bir marjınız varsa, ana Divanın arka plan rengi veya resmi, kenar boşluğu boyunca görüntülenebilir ve beyaz alan etkisi yaratabilir. Çözünürlük, sıfırların sorunlarıyla birlikte Div'lerin kenar boşluğunu ayarlamak kadar basittir.

2. Adım

Tüm blok öğeleri için kenar boşluğu ve boşluk ayarlarını eşit olarak tanımlar. Farklı tarayıcılar, tüm blok öğelerinde farklı kenar boşluğu ve önceden belirlenmiş aralıklar uygular. Bu blok öğelerinden birinin kenar boşluğu, tarayıcıdaki istenmeyen beyaz alanın etkisinden sorumlu olabilirken, başka bir tarayıcıda farklı bir etkiye sahip olabilir. Tarayıcılarda boşluk ve kenar boşluğu özelliklerini standartlaştırarak bunu güvenli bir şekilde ortadan kaldırabilirsiniz.

Blok eleman yapılandırmasının standardizasyonunu gerçekleştirecek CSS kuralları kümesi aşağıdaki gibi görünebilir:

html, vücut {marjı: 0; doldurma: 0;} p {marj 0 0 3px 0; doldurma: 0;} h1, h2, h3, h4, h5, h6 {marj 0 0 2px 0; doldurma: 0;} form {margin 0; doldurma: 0;}

3. adım

İçeriği Divanıza yerleştirin Bazı tarayıcılar, arka plan görüntüsüne sahip olsalar bile içerik içermeyen bir Div gösteremeyebilirler. Eğer seninki içeriğe sahip değilse, tarayıcı küçük bir boşluk bırakarak onu azaltabilir. Bunu çözmek için, Saydam'a şeffaf bir GIF dosyası eklemeyi düşünün. Bu, oluşturmak istediğiniz görsel izlenimi değiştirmeden tarayıcı tarafından tanınacak olan içeriği size verecektir.

4. Adım

Divleri ana Div öğesinin içine yerleştirin. Soruna neden olan iki Bölmeyi tutan bir ebeveyn Div veya sargı atayın. Beyaz alanı kaplayacak ve sitenin tasarımına uyacak daha fazla renk veya görüntü elde etmek için ana öğeye arka plan rengi koyun.

Adım 5

Hizalama özelliklerini kontrol edin. "Satır içi" hizalama yapılandırmasına (satır içi) sahip olan Div'ler, metin hizalamaları için genellikle "satır içi" hizalama parametresi kullanıldığı için metin değişiklikleri oluşturmak için Div üst ve alt kısımlarına piksel ekleme eğilimi gösterebilir. İki satırın "satır içi" hizalama stratejisini kullanarak birleştirmeye çalışmak yerine, hizalamayı "Blok" olarak yeniden atamanız ve "Float" yerleştirme özelliğini kullanarak Div'leri yerleştirmeniz yeterlidir. İşte bir örnek:

parentDiv {

görüntüleme: blok;}

childDiv1 {

yüzer: sol;}

childDiv2 {

yüzer: sol;}