“ margin-atas ” properti membantu banyak pengembang dalam membuat tata letak responsif dan memposisikan elemen HTML. Penggunaan properti 'margin-top' memberikan kontrol lebih besar atas elemen HTML, menambahkan pemisahan visual, dan membantu membuat desain responsif yang lebih baik. Panduan ini menunjukkan properti margin-top dengan implementasi praktis di CSS.
- Apa itu Properti 'margin-top'?
- Gunakan Properti “margin-top” dengan Nilai Positif
- Gunakan Properti “margin-top” dengan Nilai Negatif
Apa itu Properti 'margin-top'?
“ margin-atas ” properti digunakan untuk membuat ruang ekstra di antara elemen HTML. Itu dapat diatur dengan nilai positif dan negatif. Nilai-nilai ini diatur sesuai dengan kebutuhan desain dan membantu mencegah tumpang tindih dan menyesuaikan jarak antar elemen HTML.
Bagaimana Cara Menggunakan Properti “margin-top” dengan Nilai Positif?
Properti 'margin-top' dengan nilai positif menambahkan spasi ekstra dari posisi teratas ke tengah elemen HTML yang dipilih. Nilai yang diberikan bisa dalam piksel, persentase, rem, atau dalam nilai global seperti otomatis, mewarisi, tidak disetel, dll. Mari kita telusuri contoh untuk pemahaman yang lebih baik:
Contoh: Pemanfaatan Nilai Positif
Mari kita asumsikan file HTML yang membuat ' Setelah membuat struktur HTML, terapkan properti CSS ke “ positif ' kelas: Dalam cuplikan kode di atas: Setelah eksekusi potongan kode di atas, halaman web terlihat seperti ini: Gif di atas mengilustrasikan efek pengaturan nilai properti margin-top di halaman web. “ margin-atas ” properti dengan nilai negatif mengatur spasi tambahan dari posisi atas berlawanan dengan tengah atau ke arah luar halaman relatif terhadap elemen HTML yang dipilih. Ini sebagian besar digunakan untuk membuat efek yang tumpang tindih atau dalam penentuan posisi elemen HTML. Mari kita telusuri contoh untuk pemahaman yang lebih baik. Contoh: Pemanfaatan Nilai Negatif Mari kita asumsikan file HTML yang membuat ' Deskripsi cuplikan kode yang disebutkan di atas dijelaskan di bawah ini: Setelah eksekusi potongan kode di atas, halaman web muncul seperti ini: Gif di atas menampilkan efek yang terjadi pada desain halaman web dengan menetapkan nilai negatif untuk properti margin-top. “ margin-atas ” properti digunakan untuk membuat ruang ekstra di antara elemen HTML. Itu dapat diatur dengan nilai positif dan negatif. Jika properti 'margin-top' diberi nilai positif, ruang ekstra ditambahkan ke tengah halaman web atau elemen HTML yang dipilih. Dalam hal nilai 'negatif', spasi ditambahkan tetapi mengarah ke luar halaman. Artikel ini menunjukkan apa itu properti margin-top di CSS.
< tubuh >
< div kelas = 'positif' >
< P > Margin atas dengan nilai positif diberikan P >
div >
tubuh >
< gaya >
.positif {
lebar: 300px;
tinggi: 200px;
background-color: hijau hutan;
ukuran font: 20px;
warna: #fff;
margin-atas: 50px;
}
gaya >
Bagaimana Cara Menggunakan Properti “margin-top” dengan Nilai Negatif?
.negatif {
warna putih;
perataan teks: tengah;
warna latar belakang: merah ;
margin atas: -30px ;
padding: 30px;
tinggi: 100px;
}
gaya >
< tubuh >
< div kelas = 'negatif' >
Nilai Negatif ditetapkan untuk Properti margin-top
div >
tubuh >
Kesimpulan