Ketika Anda menggunakan blok div HTML dan bagian tengah blok tidak dapat dihubungkan dengan erat, tidak ada yang dapat dilakukan.
1. Anda bisa menambahkan satu di tengah konten <head></head>
* {
margin:0;
bantalan:0;
}
Membuat jarak antara semua blok menjadi nol tidak bertentangan dengan margin padding di bawahnya.
2. Ada masalah kesenjangan antara div atas dan bawah
Saya menulis 4 div, didistribusikan ke atas dan ke bawah, dengan spasi di antara keduanya.
.div1{
tinggi:100 piksel;
warna latar belakang: biru;
posisi:relatif;
}
.div2 {
tinggi:100 piksel;
warna latar:biruungu;
posisi:relatif;
}
.div3{
tinggi:100 piksel;
warna latar:merah;
posisi:relatif;
}
.div4{
tinggi:100 piksel;
warna latar:kuning;
posisi:relatif;
}
<tubuh>
<div kelas="div1" ></div>
<div kelas="div2"></div>
<div kelas="div3"></div>
<div kelas="div4"></div>
</tubuh>
Kemudian saya mencoba menambahkan margin:0 pada setiap div untuk menghilangkan spasi antar div. Kodenya adalah sebagai berikut:
.div1{
tinggi:100 piksel;
warna latar belakang: biru;
posisi:relatif;
margin: 0;
}
.div2 {
tinggi:100 piksel;
warna latar:biruungu;
posisi:relatif;
margin: 0;
}
.div3{
tinggi:100 piksel;
warna latar:merah;
posisi:relatif;
margin: 0;
}
.div4{
tinggi:100 piksel;
warna latar:kuning;
posisi:relatif;
margin: 0;
}
Hasilnya tetap tidak berubah, namun masih terdapat kesenjangan, seperti terlihat di bawah ini:
Selanjutnya, saya mencari di Baidu dan menemukan cara untuk mengatur ukuran font. Kode dan efek berikut:
badan{ukuran font:0;}
.div1{
tinggi:100 piksel;
warna latar belakang: biru;
posisi:relatif;
}
.div2 {
tinggi:100 piksel;
warna latar:biruungu;
posisi:relatif;
}
.div3{
tinggi:100 piksel;
warna latar:merah;
posisi:relatif;
}
.div4{
tinggi:100 piksel;
warna latar:kuning;
posisi:relatif;
}
Kode di atas berfokus pada penambahan body{font-size:0;}, dan efeknya adalah sebagai berikut:
Anda dapat melihat bahwa kesenjangan antara bagian atas dan bawah div telah dihilangkan. Namun, masih ada kesenjangan antara bagian atas dan kiri.
Ini yang saya lakukan dengan menambahkan body{margin:0px;}, kodenya sebagai berikut:
badan{margin:0px;}
badan{ukuran font:0;}
.div1{
tinggi:100 piksel;
warna latar belakang: biru;
posisi:relatif;
}
.div2 {
tinggi:100 piksel;
warna latar:biruungu;
posisi:relatif;
}
.div3{
tinggi:100 piksel;
warna latar:merah;
posisi:relatif;
}
.div4{
tinggi:100 piksel;
warna latar:kuning;
posisi:relatif;
}
Efeknya adalah sebagai berikut:
Seperti yang Anda lihat, semua kesenjangan telah dihilangkan.
Namun masih terdapat kendala yaitu pengaturan font-size:0; akan menyebabkan semua font hilang.
Beginilah cara saya memecahkan masalah ini: tambahkan div di dalam div dan setel ulang ukuran font div bagian dalam, misalnya: font-size:30px;.
Solusi sempurna!
3. DIV+CSS clear: keduanya menyelesaikan masalah pembuatan celah di atas div setelah floating.
Kita tahu bahwa terkadang menggunakan css float akan menghasilkan css float. Saat ini, kita perlu menghapus float. Kita dapat menggunakan atribut clear style untuk mencapai hal ini.
Namun, setelah menggunakan clear:both untuk menghapus float, celah putih sering muncul di atas div tempat clear:both diterapkan.
Solusinya adalah menambahkan overflow:hidden; ke div di atas div ini.
<div class="a tersembunyi">
<div class="bms_2_1_1 fl">~Menyeberangi lautan untuk menemuimu,</div>
<div class="bms_2_1_2 fl"><img src="__STATIC__/images/male.png" width="18" height="18"/></div>
</div>
<div class="b cle hid">Beijing</div>
Deskripsi gaya:
.cle{hapus:keduanya;}
.hid{meluap:tersembunyi;}
.fl{ mengapung:kiri;}
.fr{ mengapung:kanan;}
Ini adalah cara untuk mengatasi kesenjangan div yang disebabkan oleh clear:both hari ini.
Mengapa menggunakan clear:keduanya di div? Terutama karena teks dalam div b tidak dapat diratakan ke kiri meskipun text-align:left; diatur dalam CSS, jadi clear:both digunakan dalam kasus ini.
Beberapa pertanyaan:
(1) Mengapa text-align:left; teks berbahasa Mandarin dalam div tidak valid?
(2) Mengapa penggunaan clear:both dapat menyelesaikan masalah ketika text-align:left;
(3) Mengapa penggunaan clear:both menciptakan kesenjangan?
(4) Mengapa penggunaan overflow:hidden; di div level yang sama di atas menyelesaikan masalah kesenjangan di bawah?
Mari kita pelajari permasalahan di atas secara detail ketika kita memiliki kesempatan di masa depan.
Meringkaskan:
Ketika div menggunakan clear:both untuk membuat celah, Anda perlu menambahkan overflow:hidden; ke div saudara di atasnya untuk menghilangkan celah tersebut.