Tutorial CSS terusan- 12 box model ~ infoku.net

Pengertian Margin dalam CSS

Mirip seperti padding, margin juga merupakan spasi atau ruang kosong di dalam Box Model. Bedanya, margin berada di luar konten, yakni yang membatasi sebuah element dengan element lain. Hal ini bisa dilihat kembali dari gambar CSS box model berikut:

Terlihat margin berada di lapisan terkahir box model. Jika tanpa margin, setiap element HTML akan saling menempel satu sama lain, seperti contoh berikut:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Belajar CSS</title>

<style>

   div {

     width: 200px;

     height: 50px;

     border: 2px solid red;

     background-color: green;

   }

</style>

</head>

<body>

<div></div>

<div></div>

<div></div>

</body>

</html>

Dengan menambahkan property margin: 20px, hasilnya menjadi sebagai berikut:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Belajar CSS</title>

<style>

   div {

     width: 200px;

     height: 50px;

     border: 2px solid red;

     background-color: green;

     margin: 20px;

   }

</style>

</head>

<body>

  <div></div>

  <div></div>

  <div></div>

</body>

</html>

Sekarang setiap tag <div> akan berjarak 20 pixel satu sama lain.

Cara Penulisan Property Margin (Shorthand Notation)

Juga hampir sama dengan padding, kita juga bisa menulis property margin dengan penulisan shorthand notation. Aturan TRouBLe juga berlaku disini.
Sebagai contoh, property margin: 10px 15px 5px 20px sama artinya dengan:

margin-top: 10px;

margin-right: 15px;

margin-bottom: 5px;

margin-left: 20px;

Berikut contoh penggunaannya:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Belajar CSS</title>

<style>

   div {

     width: 200px;

     height: 50px;

     border: 2px solid red;

     background-color: green;

     margin: 20px 100px;

   }

</style>

</head>

<body>

  <div></div>

  <div></div>

  <div></div>

</body>

</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 harus memiliki margin agar tidak saling ‘bersenggolan’. Tapi bagaimana dengan tag <h1>, <h2>, atau tag <p> yang jika ditulis tanpa margin pun tetap berjarak satu sama lainnya?
Ini karena web browser memiliki margin bawaan atau default margin yang selalu aktif sampai seseorang (web designer) menimpanya dengan nilai lain.
Berikut contoh tampilan tag <h1> dan <p> tanpa style CSS apapun:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Belajar CSS</title>

</head>

<body>

<h1>Belajar CSS Box Model di infoku.net</h1>

<p>

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi

   tortor, imperdiet sed hendrerit non, consequat luctus magna. Nullam

   accumsan odioac lectus mollis finibus. Maecenas imperdiet feugiat

   felis, sit amet ullamcorper elit vulputate in.

</p>

</body>

</html>

Terlihat bahwa diantara kedua tag ini terdapat spasi atau ruang kosong yang sebenarnya adalah margin bawaan web browser.
Bagaimana kita yakin ini adalah margin? Mari kita tambahkan property margin: 0, dan berikut hasilnya:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Belajar CSS</title>

<style>

   h1, p {

     margin: 0;

   }

</style>

</head>

<body>

<h1>Belajar CSS Box Model di infoku.net</h1>

<p>

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi

   tortor, imperdiet sed hendrerit non, consequat luctus magna. Nullam

   accumsan odioac lectus mollis finibus. Maecenas imperdiet feugiat

   felis, sit amet ullamcorper elit vulputate in.

</p>

</body>

</html>

Seperti yang terlihat, kali ini diantara kedua tag ini tidak 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.

Pengertian Property Padding CSS

Padding adalah sebutan untuk spasi atau ruang diantara konten dan border. Gambar CSS Box Model berikut bisa menjelaskan dimana letak padding ini.

Seperti yang terlihat, padding berada diantara konten utama dengan border. Jadi, kenapa saya membahas border dulu sebelum padding? Ini karena untuk dapat melihat efek padding, kita harus menggunakan border. Tanpa border, padding akan susah untuk dilihat.

Cara Penulisan property Padding CSS

Property padding bisa diisi dengan satuan panjang seperti pixel, persen, em, dll. Sebagai contoh, untuk membuat padding sebesar 10 pixel, saya bisa menggunakan kode berikut:

<div style="padding: 10px"></div>

Berikut contoh penggunaannya di dalam kode HTML dan CSS:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Belajar CSS</title>

<style>

.tanpa-padding {

   border: 2px solid red;

}

.dengan-padding {

   border: 2px solid red;

   padding: 10px;

}

</style>

</head>

<body>

<p class="tanpa-padding">

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi

   tortor, imperdiet sed hendrerit non, consequat luctus magna. Nullam

   accumsan odioac lectus mollis finibus. Maecenas imperdiet feugiat

felis, sit amet ullamcorper elit vulputate in.

</p>

<p class="dengan-padding">

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi

   tortor, imperdiet sed hendrerit non, consequat luctus magna. Nullam

   accumsan odioac lectus mollis finibus. Maecenas imperdiet feugiat

   felis, sit amet ullamcorper elit vulputate in.

</p>

</body>

</html>

Dalam paragraf pertama, saya tidak menggunakan padding. Dapat terlihat teks seolah-olah langsung menempel ke sisi border. Pada paragraf kedua, saya menggunakan padding: 10px, efeknya, teks akan berjarak 10 pixel dari setiap sisi border.
CSS juga menyediakan property terpisah agar kita bisa mengatur padding pada setiap sisi, yakni dengan property padding-top, padding-right, padding-bottom, dan padding-left. Berikut contohnya:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Belajar CSS</title>

<style>

p {

   border: 2px solid red;

   padding-top: 20px;

   padding-right: 5px;

   padding-bottom: 30px;

   padding-left: 0px;

}

</style>

</head>

<body>

<p>

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi

   tortor, imperdiet sed hendrerit non, consequat luctus magna. Nullam

   accumsan odioac lectus mollis finibus. Maecenas imperdiet feugiat

   felis, sit amet ullamcorper elit vulputate in.

</p>

</body>

</html>

Sekarang masing-masing sisi memiliki nilai padding yang berbeda-beda, dimana untuk sisi atas 20 pixel, sisi kanan 5 pixel, sisi bawah 30 pixel, dan sisi kiri tanpa ada padding (0 pixel).

Penulisan Shorthand Notation Property Padding

Shorthand Notation adalah sebutan untuk penulisan singkat sebuah property CSS. Sebagai contoh, ketika kita menulis padding: 10px, maka padding ini sebenarnya sama dengan:

padding-top: 10px;

padding-right: 10px;

padding-bottom: 10px;

padding-left: 10px;

Jika kita menulis padding: 10px 5px, maka ini sama dengan:

padding-top: 10px;

padding-right: 5px;

padding-bottom: 10px;

padding-left: 5px;

Perhatikan bahwa nilai pertama (10px) digunakan untuk sisi atas dan bawah, sedangkan nilai kedua (5px) digunakan untuk sisi kiri dan kanan.
Jika property padding ditulis dengan 3 nilai, seperti padding: 10px 5px 3px, ini sama artinya dengan:

padding-top: 10px;

padding-right: 5px;

padding-bottom: 3px;

padding-left: 5px;

Jika property padding ditulis dengan 4 nilai, seperti padding: 10px 5px 3px 1px, ini sama artinya dengan:

padding-top: 10px;

padding-right: 5px;

padding-bottom: 3px;

padding-left: 1px;

Bagaimana cara menghafal urutan ini? Yang paling mudah diingat adalah dengan mengikuti arah jaruh jam, yakni mulai dari atas, kanan, bawah dan kiri. Atau bisa juga dengan menggunakan kata “TRouBLe”, yang merupakan singkatan dari Top, Right, Bottom, dan Left.
Konsep penulisan shorthand notation ini sangat penting untuk dipahami. Karena hampir setiap property CSS yang menggunakan bidang sisi seperti padding dan margin menggunakan aturan penulisan yang sama.
Ok sekian dulu tutorial kali ini kita akan lanjut ke tutorial selanjutnya.

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.