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 ,,,,
