Mengenal perbedaan margin padding serta border di CSS
Mengenal perbedaan margin, padding serta border di CSS
Bagi orang yang aktif didunia web programing atau front-end developer. Margin, padding dan border sudah tak asing bagi mereka.
Namun bagi anda yang baru belajar tentang pemrograman web tak jarang anda melupakan perbedaanya, dan tak jarang tampilan website atau blog yang sedang anda buat jadi berantakan karna salah dalam pengaturan margin padding dan border.
Oleh sebab itu disini saya akan sedikit menjabarkan tentang
Definisi serta perbedaan margin padding dan border.
1. padding
yang pertama ada padding, padding adalah jarak atau ruang yang tersisa antara content dengan border.
Untuk membantu pemahaman, anda bisa melihat gambar dibawah ini.
Dalam penggunaanya padding hanya memiliki 4 properti yakni
- padding top ("padding bagian atas")
- padding bottom ("padding bagian bawah")
- padding left ("padding bagian kiri")
- serta padding right ("padding bagian kanan")
2. Border
yang kedua ada border, Border adalah garis tepi diluar padding
ilustrasi border dapat anda lihat dibawah.
Border memiliki banyak properti, diantaranya :
- Border style ("untuk mengatur style atau bentuk dasar border 'bisa berupa titik-titik, 2 garis, garis tebal, dsb'")
- Border color ("untuk mengatur warna border")
- Border width ("untuk mengatur luas/lebar border")
- Border radius ("untuk membuat sudut lengkung pada border")
3. Margin
yang terakhir ada margin, margin adalah jarak atau space diluar border, margin juga dapat digunakan untuk mengatur jarak antar elemen di html.
ilustrasi margin, bisa anda dilihat dibawah.
Margin memiliki beberapa properti, yakni :
- Margin top ("margin atas")
- Margin Right ("margin kanan")
- Margin bottom ("margin bawah")
- Margin left ("margin kiri")
Gambaran perbedaan margin padding dan border :
Demikian lah sedikit rangkuman tentang 'perbedaan margin, padding dan border', bila ada kesalahan atau kekurangan dalam penyampaian mohon dimaafkan serta dikoreksi dikolom komentar.
Arigatou gozaimasu >'<
