Belajar CSS: Mengenal Box Model

Dalam CSS terdapat cara untuk mengatur jarak antara komponen. Jarak antara komponen harus disesuaikan dengan komponen dan isi. CSS Box Model merupakan cara tersebut. Jadi mari kita pelajari Box Model!

Apa itu Box Model?

Box Model merupakan konsep CSS untuk memproses elemen dengan model kotak.

Pada Box Model terdiri dari:

• Content
• Padding
• Border
• Margin

Content

Content merupakan area komponen dimana tulisan dan gambar ditampilkaan. Kita dapat mengatur panjangya dengan properti width dan lebarnya dengan height. Keduanya diisi dengan CSS Unit. Contoh:

<style>
    .box {
        width: 100px;
        height: 100px;
        background: lightgrey;
    }
</style>
<div class="box">CONTENT</div>

Menjadi:

Border

Border merupakan garis tepi yang memisahkan Padding dan Margin. Border dapat diatur warna, ketebalan, bentuk dan lainya. Contoh:

<style>
    .box {
        width: 100px;
        height: 100px;
        background: lightgrey;
        border: 5px solid red;
    }
</style>
<div class="box">CONTENT</div>

Menjadi

Untuk lebih jelasnya kalian bisa melihat blog saya sebelumnya tentang CSS Border.

Padding

Padding merupakan jarak antara Border dan Content. Untuk mengatur padding kalian bisa menggunakan properti:

• padding-top, untuk padding atas
• padding-bottom, untuk padding bawah
• padding-left, untuk padding kiri
• padding-right, untuk padding kanan

Semua properti di atas diisi dengan CSS Unit. Contoh:

<style>
    .box {
        width: 100px;
        height: 100px;
        background: lightgrey;
        border: 5px solid red;
        padding-left: 25px;
        padding-right: 25px;
        padding-top: 10px;
        padding-bottom: 10px; 
    }
</style>
<div class="box">CONTENT</div>

Menjadi

Kita juga bisa menggunakan CSS Shorthand yaitu properti padding. Properti tersebut dapat isi dengan ketentuan sebagai berikut:

1. Jika padding diisi dengan 1 nilai: padding: 20px maka pading kiri, kanan, atas dan bawah 20px
2. Jika padding diisi dengan 2 nilai: padding: 20px 15px maka
   • Padding atas dan bawah 20px
   • Padding kiri dan kanan 15px
3. Jika padding diisi dengan 3 nilai: padding: 20px 15px 10px
   • Padding atas 20px
   • Padding kiri dan kanan 15px
   • Padding bawah 10px
4. Jika padding disi dengan 4 nilai: padding: 20px 15px 10px 5px
   • Padding atas 20px
   • Padding kanan 15px
   • Padding bawah 10px
   • Padding kiri 5px

Jadi semua properti padding di contoh kode diatas bisa kita ganti dengan:

padding: 10px 25px;

Margin

Margin merupakan area diluar border dan jarak border dengan komponen lainya. Untuk mengaturnya kita bisa menggunakan properti:

• margin-top, untuk margin atas
• margin-bottom, untuk margin bawah
• margin-left, untuk margin kiri
• margin-right, untuk margin kanan

Semua properti tersebut diisi dengan CSS Unit. Contoh:

<style>
    .box {
        width: 100px;
        height: 100px;
        background: lightgrey;
        border: 5px solid red;
        padding: 10px 25px;
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: 10px;
        margin-right: 10px;
    }
</style>
<div class="box">CONTENT</div>
<div class="box">CONTENT</div>

Menjadi:

Jika kita hilangkan marginya maka menjadi:

Kita juga bisa menggunakan CSS Shorthand yaitu properti margin. Properti tersebut dapat isi dengan ketentuan sebagai berikut:

1. Jika margin diisi dengan 1 nilai:
   margin: 20px maka pading kiri, kanan, atas dan bawah 20px
2. Jika margin diisi dengan 2 nilai:
   margin: 20px 15px maka
   • Margin atas dan bawah 20px
   • Margin kiri dan kanan 15px
3. Jika margin diisi dengan 3 nilai:
   margin: 20px 15px 10px
   • Margin atas 20px
   • Margin kiri dan kanan 15px
   • Margin bawah 10px
4. Jika margin disi dengan 4 nilai:
   margin: 20px 15px 10px 5px
   • Margin atas 20px
   • Margin kanan 15px
   • Margin bawah 10px
   • Margin kiri 5px

Jadi semua properti margin pada contoh kode diatas bisa kita ganti dengan:

margin: 10px;

Kesimpulan

Semoga tutorial saya kali ini membantu. Terimakasih.