css margin

Margin dalam CSS(Cascading Style Sheets) merupakan property css yang digunakan untuk membuat jarak/spasi pada semua sisi dari border terluar suatu element, sisi yang dimaksud disini yaitu sisi atas(margin-top), sisi kanan(margin-right), sisi bawah(margin-bottom) dan sisi kiri (margin-left), dengan kata lain margin adalah property yang digunakan untuk memberikan jarak antara border suatu element dengan dengan element lain.

Daftar Isi

• Property Margin Side
• Contoh Coding Margin
• Shorthand Margin
• Contoh Coding Shorthand Margin
• Shorthand Margin 3 Value
• Contoh Coding Shorthand Margin 3 Value
• Shorthand Margin 2 Value
• Contoh Coding Shorthand Margin 2 Value
• Shorthand Margin 1 Value
• Margin Collapse
• Contoh Coding Margin Collapse
• Link Urutan Belajar CSS

Property Margin Side

Seperti disebutkan sebelumnya, untuk pembuatan margin per sisi dapat menggunakan property margin dengan empat sisi dari suatu element, yaitu: margin-top, margin-right, margin-bottom dan margin-left, sedangkan untuk value/nilainya adalah : 

• auto: menentukan margin berdasarkan perhitungan browser
• ukuran panjang dari margin dalam satuan : pt, px
• persen (%) : menentukan margin berdasarkan persentase
• inherit : menentukan margin sesuai dengan nilai dari margin elemen induknya (parent element

Nilai margin juga diperbolehkan diisi dengan nilai minus (negative).

Contoh Coding Margin

Jika coding tersebut dijalankan browser maka akan menghasilkan tampilan seperti ini:

 

Shorthand Margin

Untuk menyingkat penulisan margin ke dalam 1 baris code, penulisan margin ke empat sisi tersebut bisa disingkat menjadi 1 bari code dengan urutannya adalah margin-top, margin-right, margin-bottom, kemudian margin-left, atau bisa dikatakan penulisan urutan margin tersebut searah dengan putran jarum jam yang diawali dari margin atas, kemudian kanan, bawah dan terakhir adalah margin kiri.
Contoh penulisan shorthand margin

margin : 100px 50px 100px 50px;

akan menghasilkan margin-top ; 100px, margin-right: 50px, margin-bottom : 100px dan margin-left : 50px;

Contoh Coding Shorthand Margin

Jika coding tersebut dijalankan browser maka akan menghasilkan tampilan seperti ini:

Shorthand Margin 3 Value

misalnya shorthand margin ditulis hanya dengan 3 value contohnya seperti ini:
margin : 100px 200px 300px;
akan menghasilnya margin-top 100px, margin-right dan margin-left adalah 200px dan terakhir margin-bottom adalah 300px.

Contoh Coding Shorthand Margin 3 Value

Jika coding di atas dijalankan pada browser maka akan menghasilkan tampilan seperti ini :

Shorthand Margin 2 Value

misalnya shorthand margin ditulis hanya dengan 2 value contohnya seperti ini:
margin : 100px 200px;
akan menghasilnya margin-top 100px dan margin-bottom = 100px, sedangkan margin-left dan margin-right adalah 200px;

Contoh Coding Shorthand Margin 2 Value

Jika coding di atas dijalankan pada browser maka akan menghasilkan tampilan seperti ini :

Shorthand Margin 1 Value

sedangkan jika shorthand margin hanya mempunya 1 value saja, akan menghasilkan semua sisi margin yang sama  di semua sisinya (margin-top, margin-right, margin-bottom dan margin-left), misalnya :
margin 50px;
akan menghasilkan :
margin-top : 50px; margin-right:50px; margin-bottom:50px dan margin-left:50px.

Margin Collapse

Margin/jarak 2 elemen dapat menyusut/menciut/collapse, margin collapse hanya berlaku pada margin top dan margin bottom, semisal element pertama yang berada di bagian atas, mempunya margin bottom 100px sedangkan element kedua yang berada di bawahnya mempunya margin top sebesar 100px, maka margin yang berlaku untuk kedua element tersebut adalah margin yang paling besar nilainya di antara margin top dan margin bottom tersebut, sehinnga jarak yang berlaku antara kedua element tersebut adalah 100px, bukan penjumlahan antara keduanya, beda halnya dengan margin left dan margin right, dalam hal ini tidak ada margin collapse antara kedua margin left dan right.

Contoh Coding Margin Collapse

jika coding di atas dijalankan pada browser maka akan menampilkan halaman seperti gambar di bawah ini :

Link Urutan Belajar CSS

Berikut adalah link urutan belajar CSS :

1. CSS Color
2. CSS Background
3. CSS Border 
4. CSS Margin

Demikian dokumentasi belajar css bagian margin, semoga bermanfaat untuk semua, sampai jumpa pada dokumentasi belajar css topik yang lainnya.