Properti Margin CSS

Space For Rent!

Dengan CSS anda bisa mengontrol penuh kebutuhan margin, CSS juga memberi kemudahan untuk mengatur setiap sisi margin (atas, kanan, kiri, dan bawah). Bagi yang baru membaca tutorial ini ada baiknya anda membaca tutorial sebelumnya yaitu CSS Colors dan CSS Background.

Note: Margin sama sekali tidak memiliki warna latar belakang alias transparan!

Margin - Individual

Seperti yang kami sebutkan di atas bahwa CSS memberi kemudahan untuk mengatur masing - masing sisi margin sebagai contoh:

• margin-top
• margin-right
• margin-bottom
• margin-left

Semua sifat-sifat margin dapat memiliki value berikut:

• auto - browser otomatis menghitung margin.
• ukuran/length - menentukan margin menggunakan ukuran px, pt, cm, atau etc.
• % - menentukan margin dengan % dari lebar sebuah ruang pada elemen.
• inherit - menentukan margin harus mengikuti elemen sebelumnya atau mewarisi value elemen sebelumnya.

Note: Tidak menutup kemungkinan kita juga bisa mengguakan value negatif pada margin, ketika kita menemukan konten yang overlap.

Pada contoh berikut kami menetapkan margin berbeda untuk elemen <p> yang tidak memiliki class:

Pada contoh berikut (.satu) akan memiliki margin yang sama dari elemen sebelumnya atau parent element:

Properti Margin - Singkatan

Untuk menghemat baris dalam koding, margin dapat digunakan hanya satu baris untuk mendefinisikan masing - masing margin. Properti margin contohnya sebagai berikut:

• margin-top
• margin-right
• margin-bottom
• margin-left

Jadi, berikut adalah cara kerjanya:

Jika properti margin memiliki empat value:

• margin: 25px 50px 75px 100px;
  • maka margin-top = 25px
  • margin-right = 50px
  • margin-bottom = 75px
  • dan margin-left = 100px

Jika properti margin memiliki tiga value:

• margin: 25px 50px 75px;
  • maka margin-top is 25px
  • margin-right dan left = 50px
  • dan margin-bottom = 75px

Jika properti margin memiliki dua value:

• margin: 25px 50px;
  • maka margin-top dan bottom = 25px
  • dan margin-right dan left = 50px

Jika properti margin memiliki satu value:

• margin: 25px;
  • maka semua margin top,right,bottom dan left = 25px.

Menggunkan Value Auto

Anda dapat menggunakan properti margin dengan value auto sehingga posisinya akan berada pada ditengah - tengah (horisontal) dari sebuah wadah elemen tersebut. Dan secara otomatis, elemen akan membagi margin kanan dan kiri sesuai ruang yang ada:

Oke! Sekian dahulu artikel CSS Margin, semoga bermanfaat dan apabila ada yang kurang Nesia mohon maaf sebesar besarnya. Jangan lupa kritik dan sarannya supaya Nesia bisa lebih baik lagi dalam menulis dan memberi informasi kepada para pembaca. Terus Semangat dan sampai jumpa di artikel berikutnya.

Untuk terus mendukung Aktifitas kami, bisa donasikan bantuan anda dengan klik tombol di bawah.

Space For Rent!

Tweet

Postingan terkait:

Ditulis Mimin Betta — Sunday, June 5, 2016 — Add Comment — Betta Dev, CSS Tutorial, CSS3, Help Programmer, How To, HTML, HTML CSS, HTML Element, HTML Style, Pemrograman, Pemula Belajar, Source Code, Tutorial HTML, Web Development