Mengatur Jarak Element ( CSS margin , padding ) `

Bagaimanakah cara Mengatur Jarak Element div , img , p dan lain sebagainya . . ( CSS margin , padding )

Apa Itu Margin ?, dan Apa Itu Padding ,,
margin adalah sebuah property dari css yang berfungsi untuk mengatur jarak Element dengan Element lain Sedangkan Padding property yang berfungsi untuk mengatur jarak content / isi dengan Element itu sendiri atau bisa kita samakan dengan ketebalan Element . Sedikit penjelasan mengenai CSS margin , padding di atas .
baiklah , Tutorial kita kali ini yaitu cara mengatur jarak Element baik itu div , img , p dan lain sebagainya .oy , bagi sobat yang belum baca Artikel sebelumnya silahkan baca disini yaitu Tips Mengatur Letak Element CSS FLOAT , CLEAR atau baca saja nanti setelah menyimak cara mengatur jarak Element .
Adapun beberapa property dan value untuk CSS margin , padding ini . selengkapnya silahkan lihat pada tabel di bawah ini :

PROPERTY	DESCRIPTION
margin	menyesuaikan jarak element dengan element lain
margin-top	menyesuaikan jarak element hanya pada bagian atas element
margin-right	menyesuaikan jarak element hanya pada bagian kanan element
margin-bottom	menyesuaikan jarak element hanya pada bagian bawah element
margin-left	menyesuaikan jarak element hanya pada bagian kiri element
padding	menyesuaikan jarak element dengan isi element
padding-top	menyesuaikan jarak element dengan isi element hanya pada bagian atas content
padding-right	menyesuaikan jarak element dengan isi element hanya pada bagian kanan content
padding-bottom	menyesuaikan jarak element dengan isi element hanya pada bagian bawah content
padding-left	menyesuaikan jarak element dengan isi element hanya pada bagian kiri content

VALUE	KETERANGAN
px	menyesuaikan jarak Element menggunakan pixels
em	menyesuaikan jarak Element menggunakan em
pt	menyesuaikan jarak Element menggunakan pt
cm	menyesuaikan jarak Element menggunakan centi meter

dibawah ini adalah gambar border , content , margin , padding :
GAMBAR



Contoh 1 :

#img {margin:8px 0 8px;}

CSS di atas menyebutkan bahwa jarak element bagian atas dan bawah 8px , sedangkan pada bagian kiri dan kana adalah 0 .
contoh 2 :

#img {margin:8px 8px;}
code CSS di atas sama dengan code 
#img {margin:8px;}
contoh 3: 
#img {margin:4px 8px 16px 32px;}
code CSS di atas menyebutkan bahwa jarak atas 4px , kanan 8px , bawah 16px , kiri 32px .
Aturan css seperti di atas sama dengan aturan css padding .
click button di bawah ini untuk mengetahui posisi margin dan padding beserta code css nya ,, 

POSISI MARGIN 
 




Source Code



#box img {width:60px;height:60px;padding:0;margin:0;}

POSISI PADDING 
 



contoh di atas hanya beberapa code css saja untuk keseluruhan akan seperty berikut ini :

<style>
#BOX {width:200px;height:200px;margin-top:20px;padding:0;border:1px solid black;position:relative;clear:both;}
#BOX img{width:80px;height:80px;padding:0;margin:0;}
</style>
<div id="BOX">
<img src="https://sites.google.com/site/blognyamastony/background/Chat-bdr-putih.png"/>
<img src="https://sites.google.com/site/blognyamastony/background/Chat-bdr-putih.png"/>
</div>
untuk CSS positioning silahkan baca disini yaitu cara mengatur posisi Element (CSS POSITION PROPERTY ) .
dan mungkin saya rasa cukup disini pembahasan mengenai CSS margin padding di cara mengatur jarak Element . . 
Dan semoga Artikelnya bermanfaat untuk sobat ,,,,

Terima kasih Anda telah membaca Artikel mengenai Mengatur Jarak Element ( CSS margin , padding ) dan Kata kunci untuk Artikel ini yaitu Mengatur Jarak Element ( CSS margin , padding )