Sabtu, 23 Januari 2021

pengertian dan fungsi margin pada CSS

Pada tutorial sebelumnya saya telah membahas tentang cara mengatur font pada CSS. Pada kesempatan kali ini saya akan membahas tentang pengertian dan fungsi margin pada CSS.


Pengertian Margin Pada CSS

Margin adalah jarak antara element. Margin berfungsi untuk membatasi element satu dengan yang lainnya. Untuk lebih jelasnya silahkan lihat gambar dibawah ini :
pengertian dan fungsi margin pada CSS
Dari gambar diatas terlihat ada margin antara element A dan element B. Jika tidak dikasih margin, maka gambar akan menempel, lihat contoh dibawah ini :
pengertian dan fungsi margin pada CSS
Jika tidak terjadi kesalahan, maka hasilnya seperti dibawah ini :

pengertian dan fungsi margin pada CSS
Dari gambar diatas ketika bisa melihat kotak biru dan merah menempel, itu terjadi karena tidak ada margin. Jika kita menambahkan margin: 30px pada setiap kotak, maka hasilnya akan menjadi seperti dibawah ini :
pengertian dan fungsi margin pada CSS

pengertian dan fungsi margin pada CSS

Dengan menambahkan margin: 30px pada setiap kotak, maka kotak biru dan kotak merah tidak menempel lagi.


Cara Penulisan Margin

Untuk menulis property margin, lihat kode css dibawah ini :
pengertian dan fungsi margin pada CSS
Dengan menuliskan margin: 10px, berarti Anda memberikan besarnya margin pada setiap sisi = 10px ( margin-top : 10px, margin-right: 10px, margin-bottom: 10px, margin-left: 10px ). Anda juga bisa menulis property margin dengan “metode shorthand” seperti dibawah ini.
pengertian dan fungsi margin pada CSS
kode diatas sama artinya dengan :
pengertian dan fungsi margin pada CSS
Untuk lebih jelasnya, Anda bisa melihat gambar dibawah ini:

pengertian dan fungsi margin pada CSS
Demikianlah tutorial tentang pengertian dan fungsi margin pada CSS. Silahkan bagikan atau share artikel ini jika dirasa ada yang membutuhkan.

  • Share Post:
related posts
about author

Seseorang yang suka belajar sesuatu yang baru, terutama tentang pemrograman web. Senang berbagi tentang pengetahuan dan belajar dari yang lain.

recent posts
categories
trending posts
SERBA KOMPUTER © 2017 - 2019, ALL RIGHTS RESERVED.