Box Model: Padding dan Margin
Padding dan margin adalah dua properti penting dalam CSS yang digunakan untuk mengatur jarak antara elemen di dalam halaman web. Berikut adalah penjelasan singkat tentang keduanya:
Padding:
Padding adalah ruang di sekitar konten dalam sebuah elemen. Ini membantu mengatur jarak antara konten elemen dan batasnya. Properti padding dapat diatur secara individual untuk setiap sisi elemen (atas, kanan, bawah, kiri), atau secara keseluruhan.
Contoh:
Shortcut Padding:
padding: 20px 10px;: Mengatur padding atas dan bawah sebesar 20 piksel, dan padding kanan dan kiri sebesar 10 piksel.
padding: 20px 10px 5px;: Mengatur padding atas sebesar 20 piksel, padding kanan dan kiri sebesar 10 piksel, dan padding bawah sebesar 5 piksel.
padding: 10px 15px 20px 50px;: Mengatur padding atas sebesar 10 piksel, padding kanan sebesar 15 piksel, padding bawah sebesar 20 piksel, dan padding kiri sebesar 50 piksel.
Margin:
Margin adalah ruang di sekitar elemen yang berfungsi untuk memberikan jarak antara elemen dengan elemen lain di sekitarnya. Properti margin juga dapat diatur secara individual untuk setiap sisi elemen atau secara keseluruhan.
Contoh:
Shortcut Margin:
margin: 20px 10px;: Mengatur margin atas dan bawah sebesar 20 piksel, dan margin kanan dan kiri sebesar 10 piksel.
margin: 20px 10px 5px;: Mengatur margin atas sebesar 20 piksel, margin kanan dan kiri sebesar 10 piksel, dan margin bawah sebesar 5 piksel.
margin: 10px 15px 20px 50px;: Mengatur margin atas sebesar 10 piksel, margin kanan sebesar 15 piksel, margin bawah sebesar 20 piksel, dan margin kiri sebesar 50 piksel.
Dengan menggunakan properti padding dan margin, Anda dapat mengontrol ruang di sekitar dan di antara elemen-elemen di halaman web Anda, memberikan tampilan yang rapi dan terorganisir.
Last updated