Box Model: Padding, Border dan Box Sizing

Halo teman-teman pada kesempatan kali ini saya akan membawakan materi mengenai Box Model sebuah konsep dimana setiap element yang terdapat pada halaman web diproses sebagai kotak (box). Mulai dari paragraf, header, form, gambar, logo hingga video, sebenarnya di tampilkan oleh web browser sebagai box. Pada bagian Box Model juga memiliki beberapa bagian yaitu:

1. Padding adalah ruang kosong atau space antara satu konten dengan konten yang lainnya. Dengan            padding, tampilan website akan lebih teratur dan lebih menarik.

2. Border adalah property CSS untuk menentukan lebar, corak dan juga warna garis tepi pada elemen        HTML yang paling ringkas. Dengan menggunakan property border CSS, semua sisi, baik sisi atas,        kanan, bawah dan kiri menggunakan lebar, corak dan warna garis yang sama.

3. Box Sizing adalah css property yang digunakan untuk merubah kalkulasi dalam mengukur lebar            element. Sebagaimana diketahui, secara default sebuah konten box (content-box) akan bertambah        lebar ukurannya apabila diberi border , padding , height dan width.

• Padding

Buatlah html sederhana seperti dibawah lalu kita menggunakan styling CSS external

Sama dengan Margin, Padding juga memiliki shorthand tetapi Padding tidak bisa diberi nilai negatif dan auto.

div {

    width: 200px;

    height: 200px;

    background-color: orange;

    margin: 40px auto;

    padding: 50px 40px 30px 20px;

}

Ini adalah hasil padding yang diberikan pada box

Padding juga mempengaruhi ukuran dari box maka yang dilakukan adalah mengurangi lebar dan tinggi box dengan nilai padding. Jika kalian ingin box tetap pada ukuran 300 maka kalian harus mengurangi 300 kurang 60 karna pada ukuran lebar kiri kanan ditambah lalu begitu juga pada tinggi.

div {

    width: 240px;

    height: 240px;

    background-color: orange;

    margin: 40px auto;

    padding: 30px;

}

Ini hasil dari pengurangan di CSS

• Border

Penulisan border pada CSS juga sama seperti Padding dan Margin yaitu bisa menggunakan shorthand

div {

    width: 240px;

    height: 240px;

    background-color: orange;

    margin: 40px auto;

    padding: 30px;

    border: 5px dashed red;

}

Ini dia hasil dari border yang diterapkan pada CSS.

Sama seperti Padding, Jika menambahkan Border maka box akan bertambah ukurannya, jadi kalian harus mengurangi hasil pertambahan dari border. Atas dan bawah jadi 25 maka tinggi box dikurangi 25 jadi 215.

div {

    width: 240px;

    height: 215px;

    background-color: orange;

    margin: 40px auto;

    padding: 30px;

    border-top: 5px dashed red;  

    border-bottom: 20px dotted lightgreen;

}

Jadi box tetap pada ukuran 300 jika kalian memberi Border lalu dikurangi nilainya.

• Box Sizing

Jika kalian menggunakan Box Sizing ukuran Padding dan Border akan mengikuti ukuran yang telah diatur yaitu width 300. Walaupun kalian rubah ukuran Padding dan Border hasil ukuran keselurahan box akan tetap 300.

div {

    width: 300px;

    margin: 20px auto;

    box-sizing: border-box;

}

.pertama {

        background-color: red;

        padding: 5px;

        border: 40px solid blue;

}

.kedua {

    background-color:orange;

    padding: 10px;

    border: 10px solid green;

}