' margin-top ” hartanah membantu ramai pembangun dalam mencipta reka letak responsif dan meletakkan elemen HTML. Penggunaan sifat 'margin-top' memberikan lebih kawalan ke atas elemen HTML, menambah pemisahan visual dan membantu dalam mencipta reka bentuk responsif yang lebih baik. Panduan ini menunjukkan sifat margin atas dengan pelaksanaan praktikal dalam CSS.
- Apakah Harta 'margin-top'?
- Gunakan Harta 'margin-top' dengan Nilai Positif
- Gunakan Harta 'margin-top' dengan Nilai Negatif
Apakah Harta 'margin-top'?
' margin-top harta ” digunakan untuk mencipta ruang tambahan antara elemen HTML. Ia boleh ditetapkan dengan nilai positif dan negatif. Nilai ini ditetapkan mengikut keperluan reka bentuk dan membantu dalam mencegah pertindihan dan melaraskan jarak antara elemen HTML.
Bagaimana Menggunakan Harta 'margin-top' dengan Nilai Positif?
Sifat 'margin-top' dengan nilai positif menambah jarak tambahan dari kedudukan atas ke arah tengah elemen HTML yang dipilih. Nilai yang diberikan boleh dalam piksel, peratusan, rem atau dalam nilai global seperti auto, inherit, unset, dll. Mari kita lihat contoh untuk pemahaman yang lebih baik:
Contoh: Penggunaan Nilai Positif
Mari kita anggap fail HTML yang mencipta ' Selepas penciptaan struktur HTML, gunakan sifat CSS pada ' positif ” kelas: Dalam coretan kod di atas: Selepas pelaksanaan coretan kod di atas, halaman web kelihatan seperti ini: Gif di atas menggambarkan kesan menetapkan nilai sifat atas margin pada halaman web. ' margin-top ” harta dengan nilai negatif menetapkan jarak tambahan dari kedudukan teratas bertentangan dengan tengah atau ke arah luar halaman berbanding dengan elemen HTML yang dipilih. Ia kebanyakannya digunakan untuk mencipta kesan bertindih atau dalam kedudukan elemen HTML. Mari kita lihat contoh untuk pemahaman yang lebih baik. Contoh: Penggunaan Nilai Negatif Mari kita anggap fail HTML yang mencipta ' Perihalan coretan kod yang dinyatakan di atas diterangkan di bawah: Selepas pelaksanaan coretan kod di atas, halaman web kelihatan seperti ini: Gif di atas memaparkan kesan yang berlaku pada reka bentuk halaman web dengan menetapkan nilai negatif untuk harta margin atas. ' margin-top harta ” digunakan untuk mencipta ruang tambahan antara elemen HTML. Ia boleh ditetapkan dengan nilai positif dan negatif. Jika sifat 'margin-top' diberikan dengan nilai positif, maka ruang tambahan akan ditambahkan ke bahagian tengah halaman web atau elemen HTML yang dipilih. Dalam kes nilai 'negatif', ruang ditambah tetapi ke arah luar halaman. Artikel ini menunjukkan apa itu harta margin atas dalam CSS.
< badan >
< div kelas = 'positif' >
< hlm > Bahagian atas margin dengan nilai positif diberikan hlm >
div >
badan >
< gaya >
.positif {
lebar: 300px;
ketinggian: 200px;
warna latar belakang: hijau hutan;
saiz fon: 20px;
warna: #F F F;
jidar atas: 50px;
}
gaya >
Bagaimana untuk Menggunakan Harta 'margin-top' dengan Nilai Negatif?
.negatif {
warna: putih;
text-align: tengah;
warna latar belakang: merah ;
margin atas: -30px ;
padding: 30px;
ketinggian: 100px;
}
gaya >
< badan >
< div kelas = 'negatif' >
Nilai Negatif diberikan untuk Harta atas margin
div >
badan >
Kesimpulan