Belajar CSS : CSS Margin dan Padding

Hallo teman-teman semua, apa kabar semua ?? Nah pada kesempatan kali ini saya akan memposting materi tentang CSS Margin dan padding. Berikut materinya
CSS MARGINS
Properti CSS Margin, digunakan untuk menghasilkan ruang untuk setiap sisi elemen (atas, kanan, bawah, dan kiri). Sifat margin mengatur ukuran ruang putih di luar perbatasan .

MARGIN - INDIVIDUAL SIDES
CSS Margin memiliki sifat untuk setiap sisi elemennya, antara lain :

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

Semua sifat yang terdapat pada margin memiliki nilai, yang diantaranya :

• Auto, browser menghitung margin
• Untung panjang dapat ditentukan dengan px, pt, cm.
• %, menentukan margin dalam % dari lebar yang elemen yang mengandung.
• Mewarisi, menetapkan bahwa margin harus diwarisi dari elemen induk.

Contoh dibawah ini menetapkan margin yang berbeda dari keempat semua sisi :

Berikut hasilnya :

Untuk mempersingkat waktu kita juga dapat mempersingkat kodenya menjadi margin individu untuk menentukan semua properti margin dalam satu properti.

Contoh dibawah ini menetapkan margin individu :

 

Berikut hasilnya :

 
Jika properti margin memiliki 4 nilai :
margin : 25px 50 px 75px 100px;

• margin atas : 25px
• margin kanan : 50px
• margin bawah : 75px
• margin kiri : 100px

JIka properti margin memiliki 3 nilai :
margin : 25px 50px 75px;

• margin atas : 25px
• margin kanan : 50px
• margin bawah : 75px

Jika properti margin memiliki 2 nilai :
margin : 25px 50px;

• margin atas dan bawah : 25px
• margin kanan dan kiri : 50px

JIka properti margin memili 1 nilai :
margin : 25p, maka keempat margin 25px semua

AUTO VALUE
Properti margin auto untuk horizontal pusat elemen dalam wadah. Kemudian akan mengambil lebar yang ditentukan, dan ruang yang tersisa akan dibagi sama antara margin kiri dan kanan.

Berikut hasilnya :

MEWARISI NILAI
Berikut ini merupakan contoh memungkinkan margin kiri diwariskan dari elemen induk.

Berikut hasilnya :

 

MARGIN COLLAPSE
Margin kanan dan bawah dari elemen kadang-kadang runtuh ke margin tunggal yang sama dengan yang terbesar dari dua margin. Berikut contoh yang hanya pada margin atas dan bawah.

 

Berikut hasilnya :

CSS PADDING
Properti CSS padding digunakan untuk menghasilkan ruang pada sekitar konten, membersihkan area disekitar konten (dalam perbatasan) dari elemen. Properti  padding untuk setiap sisi elemen yaitu atas, kanan, bawah dan kiri. 

CSS Padding memiliki sifat untuk setiap sisi elemennya, antara lain :

• padding-top
• padding-right
• padding-bottom
• padding-left 

Semua padding memiliki nilai berikut :

• Untung panjang dapat ditentukan dengan px, pt, cm.
• %, menentukan margin dalam % dari lebar yang elemen yang mengandung.
• Mewarisi, menetapkan bahwa padding harus diwarisi dari elemen induk.

Contoh :

Berikut hasilnya :

Referensi :
http://www.w3schools.com/css/css_margin.asp
http://www.w3schools.com/css/css_padding.asp 
 
Cukup sampai disini postingan dari saya. Semoga bermanfaat. Terimaksih. Selamat Mencoba