Langkah 1

Analisis pengaturan margin untuk setiap Div bermasalah. Pastikan bahwa Div pada setiap sisi ruang kosong tidak memiliki pengaturan margin yang menciptakan ruang kosong. Margin masing-masing Div berada di area di luarnya. Jika milik Anda memiliki margin, maka warna latar belakang atau gambar dari Div orangtua dapat ditampilkan di seluruh margin dan dapat menciptakan efek ruang putih. Resolusi sesederhana pengaturan margin Div dengan masalah nol.

Langkah 2

Menentukan pengaturan margin dan spasi secara merata untuk semua elemen blok. Browser yang berbeda menerapkan berbagai pilihan margin dan jarak yang ditentukan di semua elemen blok. Margin salah satu elemen blok ini mungkin bertanggung jawab atas efek ruang putih yang tidak diinginkan di browser, sementara memiliki efek yang berbeda di browser lain. Dengan menstandardisasi properti jarak dan margin di browser, Anda dapat menghilangkannya dengan aman.

Seperangkat aturan CSS untuk melakukan standarisasi konfigurasi elemen blok dapat muncul sebagai berikut:

html, body {margin: 0; padding: 0;} p {margin 0 0 3px 0; padding: 0;} h1, h2, h3, h4, h5, h6 {margin 0 0 2px 0; padding: 0;} bentuk {margin 0; padding: 0;}

Langkah 3

Tempatkan konten di Div Anda. Beberapa browser mungkin tidak menampilkan Div yang tidak memiliki konten, bahkan jika memiliki gambar latar belakang. Jika milik Anda tidak memiliki konten, peramban dapat menguranginya dengan meninggalkan ruang kosong kecil. Untuk mengatasi hal ini, pertimbangkan untuk memasukkan file GIF transparan ke dalam Div. Ini akan memberi Anda konten, yang akan dikenali oleh browser tanpa mengubah kesan visual yang ingin Anda buat.

Langkah 4

Sarang Div dalam elemen Div induk. Tetapkan Div induk atau pembungkus yang menyimpan dua Div yang menyebabkan masalah. Masukkan warna latar belakang ke elemen induk untuk mendapatkan warna atau gambar yang lebih diinginkan yang akan menutupi ruang putih dan sesuai dengan desain situs.

Langkah 5

Periksa properti perataan. Div yang memiliki konfigurasi pelurusan "inline" (sebaris) mungkin cenderung menambahkan piksel di bagian atas dan bawah Div untuk membuat modifikasi teks karena parameter penyejajaran "sebaris" sering digunakan untuk perataan teks. Alih-alih mencoba menggabungkan kedua Div menggunakan strategi penyelarasan "inline", cukup tetapkan kembali penjajaran di "Blokir" dan tempatkan Div menggunakan properti penempatan "mengambang". Berikut ini contohnya:

parentDiv {

display: block;}

childDiv1 {

float: left;}

childDiv2 {

float: left;}