Fungsi Margin pada CSS

Pada pembahasan kali ini kita akan mempelajari tentang fungsi Margin pada CSS. Margin sendiri merupakan area kosong transparan di sekeliling elemen namun berada di luar border, dan berbeda dengan padding yang pengatuan jaraknya berada di dalam border elemen.

Fungsi Margin pada CSS

Dari gambar di atas dapat diambil kesimpulan, bahwa margin berada di luar border elemen HTML, dan gunanya untuk mengatur jarak antara elemen dengan elemen yang berada di sebelahnya. Namun anda juga dapat membayangkan sebuah padding yang letaknya di dalam border biru dari gambar di atas.

Kita pun juga dapat mengatur Margin secara bebas, ingin kita atur langsung ke 4 sisinya atau hanya sisi atas saja, dan atau hanya sisi kiri saja.

Pengaturan Margin Pada CSS

margin : 20px;

Mengatur seluruh sisi Margin : Atas 20px, Bawah 20px, Kanan 20px, Kiri 20px.

margin : 20px 10px;

Mengatur 2 sisi Margin : Atas – Bawah 20px, Kanan – Kiri 20px.

margin : 10px 20px 30px;

Mengatur 3 sisi Margin : Atas 10px, Kanan – Kiri 20px, Bawah 30px.

margin : 10px 20px 30px 40px;

Mengatur masing – masing sisi Margin : Atas 10px, Kanan 20px, Kiri 30px, dan Bawah 40px.

Selain itu anda juga dapat mengatur masing – masing Margin sesuai sisinya

Margin-left: nilai-property;

Margin-right: nilai-property;

Margin-top: nilai-property;

Margin-bottom: nilai-property;

Satuan nilai yang dapat anda gunakan tidak hanya px, tapi anda juga dapat menggunakan cm, %, dan pt.

Di bawah ini adalah contoh dari kode sumber di atas :

apa itu margin pada css


Demikian tutorial dari fungsi margin pada CSS. Silahkan kunjungi tutorial CSS lainnya seperti cara mengatur padding pada CSS, float pada CSS, mengatur tampilan pada CSS.

Leave a comment

Your email address will not be published. Required fields are marked *

8 thoughts on “Fungsi Margin pada CSS”

× Contact Us