Belajar Css : Mengenal Margin, Padding dan Border

Margin, padding dan 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 orang awam / pemula yang baru belajar tentang pemrograman web, tak jarang kita melupakan perbedaan margin padding dan border, dan tak jarang juga tampilan website atau blog yang sedang kita buat jadi berantakan karna salah dalam pengaturan margin padding dan border.

Oleh sebab itu disini @Agata akan sedikit menjabarkan tentang definisi serta perbedaan margin padding dan border.

Fungsi margin, padding, dan border 

fungsi utama penggunaan margin, padding dan border ialah untuk mengatur tata letak suatu komponen html (bisa berupa id, class atau bahkan Tag).

Biasanya margin, padding dan border sering digunakan untuk mengatur tata letak gambar atau media lain yang tampil di dalam website.

Dengan menggunakan margin, padding dan border, maka website yang kamu buat akan lebih rapi lebih enak untuk dipandang. 

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, kamu dapat melihat ilustrasi gambar dibawah ini. 

Dalam penggunaanya padding hanya memiliki 4 properti yakni 

1. Padding top ("padding bagian atas")
2. Padding bottom ("padding bagian bawah")
3. Padding left ("padding bagian kiri")
4. Serta padding right ("padding bagian kanan")

2. Border

yang kedua ada border, Border adalah garis tepi diluar padding 

ilustrasi border dapat kamu lihat pada gambar dibawah. 

Border memiliki banyak properti, diantaranya :

1. Border style ("untuk mengatur style atau bentuk dasar border 'bisa berupa titik-titik, 2 garis, garis tebal, dsb'")
2. Border color ("untuk mengatur warna border") 
3. Border width ("untuk mengatur luas/lebar border")
4. Border radius ("untuk membuat sudut lengkung pada border")

3. Margin

yang terakhir ada margin, margin adalah jarak atau space ruang diluar border. Margin dapat digunakan untuk mengatur jarak antar elemen di html.

ilustrasi margin, bisa kamu dilihat dibawah.

Margin memiliki beberapa properti, yakni :

1. Margin top ("margin atas")
2. Margin Right ("margin kanan")
3. Margin bottom ("margin bawah")
4. Margin left ("margin kiri")

Berikut ini, 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 >'<

Baca Juga