Lapisan terakhir dari konsep CSS Box Model yakni margin. Di panduan belajar CSS kali ini akan dibahas mengenai pengertian margin dan fungsi margin dalam CSS.
Pengertian Margin di CSS
Mirip seperti padding, margin pun yakni spasi atau ruang kosong di di Box Model. Bedanya, margin berada di luar konten, yakni yang membatasi sebuah element dengan element lain. Hal ini dapat dilihat kembali dari gambar CSS box model berikut:
Terlihat margin berada di lapisan terkahir box model. Apabila tanpa margin, setiap element HTML akan saling menempel satu sama lain, seperti contoh berikut:
|
1 |
<!DOCTYPE html><br/><html><br/><head><br/><meta charset=UTF-8><br/><title>Belajar CSS</title><br/><style><br/> div {<br/> width: 200px;<br/> height: 50px;<br/> border: 2px solid red;<br/> background-color: green;<br/> }<br/></style><br/></head><br/><body><br/><div></div><br/><div></div><br/><div></div><br/></body><br/></html> |
Dengan menambahkan property margin: 20px, hasilnya menjadi selaku berikut:
|
1 |
<!DOCTYPE html><br/><html><br/><head><br/><meta charset=UTF-8><br/><title>Belajar CSS</title><br/><style><br/> div {<br/> width: 200px;<br/> height: 50px;<br/> border: 2px solid red;<br/> background-color: green;<br/> margin: 20px;<br/> }<br/></style><br/></head><br/><body><br/> <div></div><br/> <div></div><br/> <div></div><br/></body><br/></html> |
Kini ini setiap tag <div> akan berjarak 20 pixel satu sama lain.
Cara Penulisan Property Margin (Shorthand Notation)
Pun hampir sama dengan padding, kita pun dapat menulis property margin dengan penulisan shorthand notation. Aturan TRouBLe pun berlaku disini.
Selaku contoh, property margin: 10px 15px 5px 20px sama artinya dengan:
|
1 |
margin-top: 10px;<br/>margin-right: 15px;<br/>margin-bottom: 5px;<br/>margin-left: 20px; |
Berikut contoh penggunaannya:
|
1 |
<!DOCTYPE html><br/><html><br/><head><br/><meta charset=UTF-8><br/><title>Belajar CSS</title><br/><style><br/> div {<br/> width: 200px;<br/> height: 50px;<br/> border: 2px solid red;<br/> background-color: green;<br/> margin: 20px 100px;<br/> }<br/></style><br/></head><br/><body><br/> <div></div><br/> <div></div><br/> <div></div><br/></body><br/></html> |
Property margin: 20px 100px berarti saya men-set margin atas dan bawah setinggi 20 pixel, serta margin kiri dan kanan sebesar 100 pixel.
Mengenal Margin Bawaan Web Browser
Seperti yang saya singgung, setiap element HTML mesti mempunyai margin agar tak saling ‘bersenggolan’. Namun bagaimana dengan tag <h1>, <h2>, atau tag <p> yang jikalau ditulis tanpa margin pun tetap berjarak satu sama lainnya?
Ini karena web browser mempunyai margin bawaan atau default margin yang selalu aktif hingga seseorang (web designer) menimpanya dengan nilai lain.
Berikut contoh tampilan tag <h1> dan <p> tanpa style CSS apapun:
|
1 |
<!DOCTYPE html><br/><html><br/><head><br/><meta charset=UTF-8><br/><title>Belajar CSS</title><br/></head><br/><body><br/><h1>Belajar CSS Box Model di Source Code Program</h1><br/><p><br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi<br/> tortor, imperdiet sed hendrerit non, consequat luctus magna. Nullam<br/> accumsan odioac lectus mollis finibus. Maecenas imperdiet feugiat<br/> felis, sit amet ullamcorper elit vulputate in.<br/></p><br/></body><br/></html> |
Terlihat bahwa diantara kedua tag ini terdapat spasi atau ruang kosong yang sebetulnya yakni margin bawaan web browser.
Bagaimana kita yakin ini yakni margin? Mari kita tambahkan property margin: 0, dan berikut hasilnya:
|
1 |
<!DOCTYPE html><br/><html><br/><head><br/><meta charset=UTF-8><br/><title>Belajar CSS</title><br/><style><br/> h1, p {<br/> margin: 0;<br/> }<br/></style><br/></head><br/><body><br/><h1>Belajar CSS Box Model di Source Code Program</h1><br/><p><br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi<br/> tortor, imperdiet sed hendrerit non, consequat luctus magna. Nullam<br/> accumsan odioac lectus mollis finibus. Maecenas imperdiet feugiat<br/> felis, sit amet ullamcorper elit vulputate in.<br/></p><br/></body><br/></html> |
Seperti yang terlihat, kali ini diantara kedua tag ini tak ada lagi spasi dan tampak saling menempel. Ini karena property margin: 0 akan menimpa dan menghapus margin bawaan web browser.
Property margin yang kita bahas disini menutup 5 property penyusun CSS Box Model, yakni: width, height, padding, border, dan margin. Di panduan berikutnya kita akan membahas hitung-hitungan CSS Box Model di Cara Menghitung Lebar dan Tinggi CSS Box Model.
eBook CSS Uncover Duniailkom
Sumber https://www.duniailkom.com/
