Konsep CSS Box Model
Konsep CSS Box Model – CSS Box Model merupakan bagian penting yang harus dipahami dari bagian Konsep CSS Layouting. Di artikel sebelumnya saya pernah membahas mengenai display dan dimensi. Untuk memahami konsep CSS Box Model, ada baiknya kita pahami dulu mengenai display dan dimensi, karena tanpa memahami 2 konsep tersebut, akan lebih sulit memahami bagaimana mengimplementasikan dari konsep css box model ini. Sebelum lebih jauh, di bawah adalah konsep dasar yang sebaiknya kita pahami dahulu. Konsep ini saya kutip dari link https://css-tricks.com/the-css-box-model/ :
● Setiap elemen HTML yang tampil pada halaman website berada dalam sebuah box atau kotak
● Untuk ukuran width dan height dan posisi kotak bisa diatur
● Kotak tersebut bisa diberikan style baik itu berupa warna/background image
Jadi semua tampilan yang ada pada halaman website, terdiri dari kotak-kotak yang bertumpuk. Kita bisa menggunakan fasilitas inspect yang ada pada setiap browser, untuk membuktikan bahwa setiap bagian yang ada pada website adalah terdiri dari kotak-kotak atau tumpukan kotak-kotak. Caranya silakan ikuti langkah berikut ( ini contoh menggunakan google chrome) :
1. Klik kanan pada mouse, lalu pilih inspect
2. Pilih elemen
3. Dibagian sebelah kanan pilih style
4. Klik tanda ( + )
5. Lalu buat sintak berikut :
* { border: 1px solid black; }
Catatan :
● untuk pemberian style diatas, sifatnya hanya sementara di sisi browser yang kita gunakan. Bukan merubah secara permanen.
● Dari pemeberian style diatas kita bisa melihat dan membuktikan bahwa elemen yang ada pada halaman website, terdiri dari kotak-kotak.
● Kotak yang garis pinggirnya semakin tebal, artinya elemen website tersebut terdiri dari tumpukan kotak, berupa elemen html yang jumlahnya sangat banyak untuk membuat halaman website tersebut.
 |
| Inspect |
Untuk menguatkan konsep css box model selain dari https://css-tricks.com/the-css-box-model/, kita juga bisa melihat konsep css box model yang dikutip dari http://www.w3.or/TR/CSS2/box.html , sebagai berikut :
CSS box model mendefinisikan kotak yang dihasilkan dari sebuah elemen HTML, lalu menampilkan sesuai dengan format visual.
Artinya dari konsep tersebut, kotak-kotak yang terbentuk dari elemen html tersebut. Kita bisa tampilkan sesuai dengan ukuran yang kita bisa atur sendiri agar pantas dan menarik ditampilkan di halaman wesbite. Berikutnya untuk warna kita juga bisa sesuaikan. Untuk konten suatu halaman kita bisa tentukan mau diisi dengan apa, seperti mau diisi dengan tulisan, gambar,link atau elemen HTML lainnya. Pastinya letak dari kotak-kotak tersebut kita bisa atur sesuai dengan kebutuhan, kepantasan tampilan, dan faktor lainnya agar menjadi website yang menarik dan interaktif.
Berdasarkan link http://www.w3schools.com/css/css_boxmodel.asp , css box model terdiri dari 4 komponen bagian, yaitu :
 |
| CSS Box Model |
● Margin adalah area atau bagian transparan yang berada di sekitar kotak. Ketika kita membuat elemen html seperti div, maka dengan margin, kita bisa mengatur jarak atau posisi antar elemen html, atau elemen html itu sendiri.
● Padding adalah kebalikan dari margin. Padding adalah area transparan di sekitar ( dalam ) kotak. Posisi padding berada di antara border dan konten.
● Border adalah batas di sekeliling content dan padding. Untuk border kita bisa atur tebal ukurannya, style pinggiran kotaknya, dan warnanya. Tidak seperti padding dan margin, yang hanya berupa area transparan.
● Content adalah Konten sebenarnya di dalam box model, yang bisa berupa text, gambar, link atau elemen html lainnya. Konten ini nantinya akan ditampilkan di halaman sebuah website. Untuk penjelasan komponen konten ini, silakan lihat dipenjelasan untuk artikel yang menjelaskan HTML dasar dan CSS dasar :
Part 1
Pengenalan HTML
Part 2
Hello World
Part 3
Tag Head Dan Tag Body
Part 4
Paragraph
Part 5
Heading
Part 6
List
Part 7
Hyperlink
Part 8
Image
Part 9
Table
Part 10
Form
Part 1
Pengenalan CSS
Part 2
Anatomi CSS
Part 3
Penempatan File CSS
Part 4
CSS Font Styling
Part 5
CSS Text Styling
Part 6
CSS Background Styling
Part 7
CSS Selector
Part 8
CSS Inheritance
Part 9
CSS Pseudo-Class
Part 10
CSS Specifity
Pada css box model dari 4 komponen bagian CSS Box Model yang kita bisa atur ukurannya hanya 3, yaitu : Margin, Padding, Border. Untuk mengaturnya, kita bisa menggunakan property css yang tersedia untuk margin, padding, dan border. Diantaranya sebagai berikut :
| margin ( 4 sisi yang berubah) | padding ( 4 sisi yang berubah) | border ( 4 sisi yang berubah) |
| margin-top | padding-top | border-top |
| margin-right | padding-right | border-right |
| margin-buttom | padding-buttom | border-buttom |
| margin-left | padding-left | border-left |
Margin
Cara Pakai Margin
untuk informasi property margin, seperti yang tampak pada tabel ada 5. Kita bisa menggunakan salah satu, beberapa, ataupun semuanya. Untuk contoh penggunaan silakan lihat contoh sintak dibawah ini:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Margin</title> <style> .kotak1 { width: 300px; height: 300px; background-color: turquoise; margin-top: 20px; margin-right: 50px; margin-bottom: 50px; margin-left: 40px; } .kotak2 { width: 200px; height: 200px; background-color: salmon; } .kotak3 { width: 150px; height: 150px; background-color: olive; } </style> </head> <body> <div class="kotak1">Kotak1</div> <div class="kotak2">Kotak2</div> <div class="kotak3">Kotak3</div> </body> </html>
 |
| Penggunaan Margin |
Noted: untuk membuktikan kesesuaian antara margin yang kita berikan dengan yang ditampilkan di web browser. Kita bisa melakukan step berikut, seperti yang tampak pada gambar inspect elemen diatas ( bagian kanan browser ) :
1. Klik kanan pada mouse
2. Pilih inspect
3. Kemudian pilih elemen
4. Pilih computed dibagian bawah
5. Lalu lakukan sorot pada elemen yang kita ingin ketahui marginnya, dengan menggunakan toggle sorot yang ada pada bagian kiri atas ( icon panah di dalam kotak ).
6. Silakan cek margin yang kita berikan pada kotak yang berada dalam bagian computed
Margin Overlapping
Dalam penggunaan margin ini, ada istillah ‘Overlapping’, yaitu ketika 2 margin dari 2 kotak saling bertemu. Untuk overlapping tentu kita perlu pahami bagaimana perilaku ketika 2 margin dari 2 kotak yang saling bertemu. Berikut perilaku yang sebaiknya dicatat ketika pertemuan 2 margin tersebut terjadi.
1. Untuk kotak yang letaknya secara vertikal, maka ketika 2 kotak diberikan property margin baik itu margin-top dan margin-bottom, nilai margin yang akan digunakan adalah nilai yang paling besar. Silakan lihat sintak diatas, ketika kotak1 diberikan margin-bottom 50px, kemudian kotak 2 akan diberikan margin top 20px, maka margin yang akan digunakan adalah yang 50px atau margin-bottom dari kotak 1.
<style> .kotak1 { width: 300px; height: 300px; background-color: turquoise; margin-top: 20px; margin-right: 50px; margin-bottom: 50px; margin-left: 40px; } .kotak2 { width: 200px; height: 200px; background-color: salmon; margin-top: 20px; } .kotak3 { width: 150px; height: 150px; background-color: olive; } </style>
2. Untuk kotak yang letaknya secara horizontal, maka ketika 2 kotak diberikan property margin baik itu margin-left dan margin-right, nilai dari 2 margin kotak tersebut akan saling menambahkan. Untuk contoh sintak diatas, kita bisa berikan property display inline-block, pada ketiga kotak diatas, agar posisinya bisa menjadi horizontal. Inline membuat posisi ketiga kotak tersebut menjadi horizontal, sedangkan block membuat kotak-kotak tersebut menjadi bisa diatur ukuran width dan heightnya. Kotak1 diberikan margin-right sebesar 50px dan kotak2 diberikan margin-left sebesar 30px, maka total dari margin tersebut adalah 80px. Untuk sintaknya lihat contoh dibawah ini:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Margin</title> <style> div { display: inline-block; } .kotak1 { width: 300px; height: 300px; background-color: turquoise; margin-right: 50px; } .kotak2 { width: 200px; height: 200px; background-color: salmon; margin-left: 30px; } .kotak3 { width: 150px; height: 150px; background-color: olive; } </style> </head> <body> <div class="kotak1">Kotak1</div><div class="kotak2">Kotak2</div><div class="kotak3">Kotak3</div> </body> </html>
 |
| Overlapping Margin |
Noted: untuk penulisan tag <div> diatas ditulis tanpa ada spasi, hal tersebut dilakukan untuk mengatasi spasi yang muncul pada setiap kotak ketika kita menggunakan display inline-block.
Negative Margin
Nilai dari margin, baik itu untuk margin-top, margin-right, margin-left, margin-bottom nilainya bisa negatif. Pengaruh dari pemberian nilai negatif ini, akan membuat kotak yang dibawahnya atau diatasnya, ataupun disamping kanan atau kiri akan ikut bergerak setika suatu kotak diberikan margin negatif. Hal tersebut sama ketika kita memberikan nilai positif. Untuk posisi kotak secara vertikal, perilaku overlapping tidak berlaku, ketika kita memberikan nilai satu kotak positif dan satu kotak lain negatif. Keduanya akan bergerak sesuai dengan nilai yang diberikan pada properti margin ini. silakan lihat contoh sintak dibawah ini :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Margin</title> <style> .kotak1 { width: 300px; height: 300px; background-color: turquoise; margin-bottom: 70px; } .kotak2 { width: 200px; height: 200px; background-color: salmon; margin-top: -150px; } .kotak3 { width: 150px; height: 150px; background-color: olive; } </style> </head> <body> <div class="kotak1">Kotak1</div> <div class="kotak2">Kotak2</div> <div class="kotak3">Kotak3</div> </body> </html>
Untuk membuktikan nilai marginnya, silakan inspect elemen masing-masing kotak1 dan kotak2. Untuk kotak1 margin-bottom 70px, dan kotak2 -150px. Hal ini membuktikan perilaku overlapping dengan kondisi ini tidak berlaku.
Auto Margin Value
Margin kita bisa berikan nilai ‘auto’. Namun nilai auto ini, berlaku hanya untuk margin-left dan margin right. Jadi kalau kita ingin memberikan nilai auto, maka kita harus menggunakan kedua property margin-left dan margin-right, alias tidak boleh salah satu. Kecuali kita menggunakan shorthandnya. Kotak yang diberikan margin dengan nilai auto, maka secara otomatis jarak kesamping kanan dan kiri akan sama. dan kotak tersebut tentu dalam posisi ditengah dari element parentnya. Ukuran margin kiri dan kanannya sudah secara otomatis akan dihitungkan oleh browsernya. Jadi dengan menggunakan nilai auto ini, kita tidak perlu repot lagi untuk menghitung margin-left dan margin-right. Untuk contoh sintak, silakan lihat contoh dibawah ini:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Margin</title> <style> .kotak1 { width: 300px; height: 300px; background-color: turquoise; margin-left: auto; margin-right: auto; } .kotak2 { width: 200px; height: 200px; background-color: salmon; margin-left: auto; margin-right: auto; } .kotak3 { width: 150px; height: 150px; background-color: olive; margin-left: auto; margin-right: auto; } </style> </head> <body> <div class="kotak1">Kotak1</div> <div class="kotak2">Kotak2</div> <div class="kotak3">Kotak3</div> </body> </html>
 |
| Margin Auto |
Shorthand Margin
Shorthand atau singkatan berkenaan dengan cara penulisan sintak property margin. Untuk penulisan sintak property margin ini, kita bisa menuliskan dengan beberapa cara. Untuk contoh diatas, saya menuliskan 1 jenis property margin dengan satu baris. Dengan menggunakan shorthand kita bisa hanya menulisakan 1 baris untuk semua property margin yang ingin kita gunakan.
Untuk penulisan shorthand ini, urutannya dimulai dari atas, kanan, bawah, lalu terakhir kiri. Cara membaca urutan tersebut dibaca searah dengan arah jarum jam. Untuk penulisan shorthand ini, kita bisa menggunakan 1 value, 2 value, 3 value atau 4 value. Berikut contoh untuk masing-masing value.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Margin</title> <style> /*contoh 1 value*/ .kotak1 { width: 300px; height: 300px; background-color: turquoise; margin: 50px; } /*contoh 2 value*/ .kotak2 { width: 300px; height: 300px; background-color: salmon; margin: 50px auto; } /*contoh 3 value*/ .kotak3 { width: 150px; height: 150px; background-color: olive; margin: 50px 70px 40px; } /*contoh 4 value*/ .kotak4 { width: 150px; height: 150px; background-color: gold; margin: 30px 50px 70px 90px; } </style> </head> <body> <div class="kotak1">Kotak1</div> <div class="kotak2">Kotak2</div> <div class="kotak3">Kotak3</div> <div class="kotak4">Kotak4</div> </body> </html>
 |
| Shorthand Margin |
Cara Membaca Sintak CSS dan Gambar Di Atas :
a = Menggunakan margin dengan 1 value, seperti contoh sintak diatas. Margin yang digunakan 50px, artinya bahwa margin atas, kanan, bawah, dan kiri sebesar 50px.
b = Menggunakan margin dengan 2 value, seperti contoh sintak diatas. Margin yang digunakan adalah 50 px dan auto, artinya margin atas dan bawah sebesar 50px, sedangkan kanan dan kiri disetting auto alias sama, sehingga letak kotaknya berada di tengah karena sudah secara otomatis dihitung oleh browsernya.
c = Menggunakan margin dengan 3 value, seperti contoh sintak di atas. Margin yang digunakan sebesar 50 px, 70 px, dan 40px. Artinya margin atas dan bawah sebesar 50px, margin kanan 70px, dan margin kiri sebesar 40px.
d = Menggunakan margin dengan 4 value, seperti contoh di atas. Margin yang digunakan sebesar 30px, 50px, 70px, dan 90px. Artinya margin atas 30px, margin kanan 50px, margin bawah 70px, dan margin kiri 90px.
Padding
Pada prinsipnya penggunaan property margin pada CSS Box Model untuk membuat halaman website, sama seperti penjelasan untuk aturan penggunaan margin. Namun ada beberapa hal perbedaan yang bisa kita jadikan catatan dalam menggunakan property padding ini. berikut hal-hal yang perlu dicatat ketika kita menggunakan property padding ini :
● Padding tidak mengenal nilai auto baik untuk padding left dan padding right.
● Padding tidak mengenal nilai negatif
● Pemberian nilai property padding akan menambah ukuran suatu kotak elemen HTML, sedangkan margin tidak akan menambah ukuran kotak.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Padding</title> <style> /*contoh 1 value*/ .kotak1 { width: 800px; background-color: turquoise; margin: 20px auto; padding: 50px; } /*contoh 2 value*/ .kotak2 { width: 700px; background-color: salmon; margin: 20px auto; padding: 50px 40px; } /*contoh 3 value*/ .kotak3 { width: 800px; background-color: olive; margin: 20px auto; padding: 50px 70px 40px; } /*contoh 4 value*/ .kotak4 { width: 700px; background-color: gold; margin: 20px auto; padding:30px 50px 70px 90px; } /*contoh penggunaan 1 property 1 value*/ .kotak5 { width: 800px; background-color:silver; margin: 20px auto; padding-top: 40px; padding-right: 30px; padding-bottom: 50px; padding-left: 40px; } </style> </head> <body> <div class="kotak1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, debitis, odio. Veniam dolorem modi expedita atque repudiandae commodi, praesentium molestias quod officia doloribus aperiam maxime? Iusto laudantium dolor aperiam beatae omnis incidunt porro expedita illo rerum maxime maiores, non eaque necessitatibus perferendis voluptate amet accusamus suscipit tempore nulla unde quasi, dolores culpa deleniti explicabo aspernatur. Sit magnam sequi eos reiciendis corporis, hic tenetur accusamus itaque enim unde vero reprehenderit omnis explicabo, quibusdam dolores saepe dolorem. Repudiandae laborum, illum voluptate aliquam asperiores, nesciunt fugit. Sed aspernatur consequuntur eveniet totam, explicabo at sequi esse molestias vero hic impedit facere reprehenderit, amet accusantium.</div> <div class="kotak2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, similique repellat iure odio recusandae ad dolor. Nemo, iure recusandae. Autem facilis, sapiente totam possimus veritatis similique cumque id fugiat neque, eius inventore consectetur. Reprehenderit hic molestiae mollitia dignissimos laborum odio, dolor reiciendis voluptatum nemo dolores ratione suscipit illo minus, nisi fuga non aut ea velit accusantium, quasi architecto laudantium aliquam id. Eos provident atque laboriosam delectus aliquam assumenda alias sed, adipisci cum. Temporibus necessitatibus, soluta deserunt officia. Consectetur nulla quae, repudiandae totam eligendi modi non maxime, accusantium animi magnam dolorum, odio culpa minus, aliquam quisquam! Repellendus aspernatur iste quis explicabo.</div> <div class="kotak3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta quibusdam sequi laboriosam dolorem magni minima, veniam veritatis alias ex quod porro, deleniti, odio ipsa totam at atque, ullam delectus aliquid ratione natus? Maiores dolor recusandae nesciunt. Impedit obcaecati in ut quibusdam sapiente, tempore deserunt modi repellat dolor ipsum harum repellendus suscipit? Blanditiis ratione libero odit temporibus beatae in nam tempora, voluptate quae quia veniam quisquam sunt modi tenetur assumenda reiciendis amet consequuntur praesentium architecto cupiditate voluptas minima repudiandae numquam. Tenetur molestiae cum nostrum nemo pariatur ipsam dolorem perferendis, rerum ut optio corrupti ab nam quaerat velit! Ex inventore saepe architecto.</div> <div class="kotak4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero maxime et magni veniam suscipit ullam consequuntur ipsa harum voluptatem cum iure odit voluptatum enim tenetur at pariatur, eveniet aut numquam nemo, cupiditate quas tempore vero sed necessitatibus. Pariatur temporibus a delectus ducimus consectetur rerum, fuga tenetur dolores libero ullam laborum atque assumenda impedit officia sunt adipisci alias accusantium aut, voluptas eligendi illum. Doloribus ut voluptatibus, accusantium cum fuga voluptate, atque cupiditate corporis officia adipisci minus molestias ab animi. Debitis a, dolore, enim, reiciendis architecto labore assumenda libero sequi quos hic officia commodi iure dignissimos iusto? Temporibus facilis deserunt vel, sint.</div> <div class="kotak5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At consequuntur vitae incidunt porro in eaque facere sint. Adipisci, eum enim dolorum possimus eligendi in dolore consequatur beatae reprehenderit qui? Odit deserunt dicta ullam perferendis veniam. Quibusdam, officiis, eligendi! Quidem, inventore est vel ullam distinctio! Delectus necessitatibus inventore rerum sunt maxime dicta quae commodi beatae, nulla quia vero nisi fuga quo ipsum, repudiandae aspernatur amet corporis voluptatem quis sed id iste ratione repellendus aperiam? Suscipit alias, esse quaerat debitis dolore consequatur, explicabo similique repudiandae fugiat commodi animi eos sit. Autem qui odit numquam dolore perferendis ad praesentium, accusamus aspernatur obcaecati earum.</div> </body> </html>
 |
| Penggunaan Padding |
a = Kotak ini diberikan padding dengan 1 value, yaitu 50px. Artinya kotak ini memiliki padding atas, kanan, bawah dan kiri sebesar 50px.
b = Kotak ini diberikan padding dengan 2 value, yaitu 50px dan 40px. Artinya kotak ini memiliki padding atas dan bawah 50px, dan padding kanan dan kiri sebesar 40 px.
c = Kotak ini diberikan padding dengan 3 value, yaitu 50px, 70px, dan 40px. Artinya kotak ini memiliki padding atas 50px, padding kanan dan kiri sebesar 70px, dan padding bawah sebesar 40px.
d = Kotak ini diberikan padding dengan 4 value, yaitu 30px, 50px, 70px, 90px. Artinya kotak ini memiliki padding atas 30px, padding kanan 50px, padding bawah 70px, dan padding kiri 90px.
e = Kotak ini diberikan padding 4 value, sama dengan point d, namun cara penulisannya berbeda dengan point d, yang menggunakan shorthand. Point e menggunakan 1 nilai per masing-masing property padding. Jadi untuk padding atas sebesar 40px, padding kanan sebesar 30px, padding bawah sebesar 50px, dan padding kiri sebesar 40px.
Border
Untuk cara penggunaan border, agak sedikit berbeda dengan cara menggunakan margin dan padding. Karena ketika kita menggunakan property border, maka ada 3 nilai yang harus dimasukkan kedalam property border ini. nilai tersebut yaitu :
 |
| Cara Penulisan Border |
● Widht adalah lebar dari border yang akan kita gunakan dengan satuan yang biasa digunakan adalah px.
● Style adalah bentuk style dari border yang akan kita gunakan, 4 macam nilai style yang bia kita berikan pada property border ini. nilai tersebut yaitu solid, dotted, dashed, dan double.
 |
| Style Border |
● Color adalah warna yang akan kita berikan pada border tersebut. Nilai dari color ini, kita bisa tuliskan berdasarkan nama warna, bilangan hexadecimal, ataupun nilai rgba(red, green, blue, alfa).
Selanjutnya untuk contoh penulisan sintak diatas, kita bisa lihat contoh dibawah ini. bagaimana kita bisa mengimplementasikan border pada kotak elemen html berikut :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Border</title> <style> div { display: inline-block; float: left; } /*contoh 1 value*/ .kotak1 { width: 250px; height: 200px; background-color: turquoise; margin-top: 50px; margin-right: 30px; padding: 30px; border: 5px solid black; } /*contoh 2 value*/ .kotak2 { width: 250px; height: 200px; background-color: salmon; margin-top: 50px; margin-right: 30px; padding: 30px; border: 5px dotted #000; } /*contoh 3 value*/ .kotak3 { width: 250px; height: 200px; background-color: olive; margin-top: 50px; margin-right: 30px; padding: 30px; border: 5px dashed rgba(0,0,0,50%); } /*contoh 4 value*/ .kotak4 { width: 250px; height: 200px; background-color: gold; margin-top: 50px; margin-right: 30px; padding: 30px; border: 5px double black; } /*contoh penggunaan 1 property 1 value*/ .kotak5 { width: 250px; height: 200px; background-color:silver; margin-top: 50px; margin-right: 30px; padding: 30px; border-width: 5px; border-style: dotted; border-color: #000; } /*contoh penggunaan border hanya satu sisi saja*/ .kotak6 { width: 250px; height: 200px; background-color: gold; margin-top: 50px; margin-right: 30px; padding: 30px; border-left: 5px dashed black; } </style> </head> <body> <div class="kotak1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, debitis, odio. Veniam dolorem modi expedita atque repudiandae commodi. </div> <div class="kotak2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, similique repellat iure odio recusandae ad dolor. </div> <div class="kotak3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta quibusdam sequi laboriosam dolorem magni minima.</div> <div class="kotak4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero maxime et magni veniam suscipit ullam consequuntur ipsa harum voluptatem cum iure odit voluptatum enim tenetur at pariatur.</div> <div class="kotak5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At consequuntur vitae incidunt porro in eaque facere sint. </div> <div class="kotak6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, autem fugit facere perferendis, officiis modi! </div> </body> </html>
 |
| Penggunaan Border |
a = Sebuah kotak diberikan border sebesar 5 px, dengan style solid, dan warna border yang digunakan adalah black.
b = Sebuah kotak diberikan border sebesar 5 px, dengan style dotted, dan warna border yang digunakan adalah black tapi penulisan warnanya menggunakan bilangan hexadeciman #000.
c = Sebuah kotak diberikan border sebesar 5 px, dengan style dashed, dan warna border yang digunakan adalah black tapi penulisan warnanya menggunakan rgba yang tingkat transparansinya 50%. rgba(0,0,0,50%)
d = Sebuah kotak diberikan border sebesar 5 px, dengan style double, dan warna border yang digunakan adalah black.
e = Sebuah kotak diberikan border sebesar 5 px, dengan style dotted, dan warna border yang digunakan adalah black. Penulisan untuk kotak e, dalam sintak cssnya 1 property 1 value ( lihat sintak css). Berbeda dengan 4 kotak sebelumnya. Namun biasanya cara penulisan ini jarang dilakukan. Hanya sekedar pengetahuan, kalau kita bisa menuliskan sintak border ini, bisa dilakukan dengan cara seperti ini.
f = Sebuah kotak diberikan border sebesar 5 px, dengan style dashed, dan warna border yang digunakan adalah black. Namun untuk kotak ini, salah satu contoh untuk memberikan border pada salah satu sisi kotak saja. Jadi untuk memberikan border, kita tidak harus ke empat sisi kotak. Kita bisa saja mendekorasi kotak dengan hanya satu sisi, dua sisi, atau tiga sisi saja. Dengan border seperti ini, kita bisa memberikan property satu per-satu, yaitu: border-top, border-right, border-bottom, dan border-left.
Box Sizing
Untuk penggunaan border dan padding. Akan menambahkan ukuran sebuah kotak elemen HTML tersebut. sebenarnya hal ini tidak jadi masalah kalau hanya 1 kotak. Tapi ketika kita membuat sebuah halaman website, dan halaman website tersebut membutuhkan banyak sekali tumpukan kotak. Ini akan merepotkan, ketika kita harus memodifikasi satu kotak saja. Kita harus menghitung ulang satu persatu padding dan margin kotak-kotak tersebut kalau memang padding dan marginnya berubah. seperti contoh halaman facebook diatas. Dimana tumpukan kotaknya sangat banyak terlihat dari tebal bordernya. Karena itu kita membutuhkan suatu property untuk mengatasi masalah ini. di CSS3 sudah disediakan property untuk mengatasi masalah ini, yaitu dengan menggunakan property ‘box-sizing’ dengan menggunakan value ‘border-box’. Dengan menggunak property box-sizing, maka browser akan secara otomatis menghitungkan nilai padding dan margin dengan ukuran kotak yang sudah ditentukan. Silakan lihat contoh sintak dibawah ini:
* Sintak CSS sebelum diberikan property box-sizing :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Border</title> <style> .kotak1 { width: 250px; height: 200px; background-color: turquoise; margin: 30px auto; padding: 30px; border: 5px solid black; } </style> </head> <body> <div class="kotak1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, debitis, odio. Veniam dolorem modi expedita atque repudiandae commodi. </div> </body> </html>
* Contoh sintak setelah diberikan box-sizing:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Border</title> <style> .kotak1 { width: 250px; height: 200px; background-color: turquoise; margin: 30px auto; padding: 30px; border: 5px solid black; box-sizing: border-box; } </style> </head> <body> <div class="kotak1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, debitis, odio. Veniam dolorem modi expedita atque repudiandae commodi. </div> </body> </html>
 |
| Penggunaan Box Sizing |
Lihat gambar elemen kotak tanpa menggunakan box sizing, padding dan margin akan menambahkan ukuran kotak tersebut. di sintak css width-nya 250px dan height-nya 200px. Hasil pada halaman browser, tepatnya pada inspect elemen yang bersangkutan, kotaknya menjadi lebih besar. Untuk widthnya tidak lagi sebesar 250px, tapi ukuran width = 250px + (5x2) + (30x2). Jadi total widthnya menjadi 320px. Sedangkan heightnya juga sama, tidak lagi menjadi 200px. Tapi height = 200px + (5x2) + (30x2). Jadi total heightnya menjadi 270px.
Dengan menggunakan property box-sizing seperti pada gambar dibawahnya, width dan heightnya akan sama seperti yang ditulis pada sintak cssnya, yaitu 250px X 200px. Padding dan margin akan secara otomatis dihitung oleh browser. Sehingga untuk kotak kontennya menjadi 180px X 130px.
Sekian untuk pembahasan mengenai CSS Box Model Ini. semoga pembahasan konsep dasar layouting ini, bisa makin menguatkan pondasi kita, dalam mendesign halaman website. Terutama bagi saya, tentunya untuk mendesign halaman blog yang saya punya.
Happy Blogging Guys 😄😄😄 ....
Contoh Design Border di bawah ini bisa digunakan untuk membungkus judul, quote, image, atau catatan-catatan penting lainnya di halaman website kalian. Sehingga bisa lebih cantik dan menarik . Silakan untuk Source Codenya bisa download dibawah ya...
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae soluta error quaerat aliquid aperiam, provident ex ea neque veritatis, accusamus nostrum voluptatem voluptate, quo praesentium nam. Suscipit aspernatur rem, fuga!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati illo quisquam repellendus, sint, quibusdam non tempore dolorem neque eum ad excepturi mollitia voluptatum quos, ipsum! Dolor sequi officiis suscipit velit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente accusamus sint illo nihil quos itaque omnis ipsa amet reiciendis incidunt quod nam deleniti, voluptatibus, cumque iste in doloribus quae quia.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad pariatur id, sint vitae qui impedit consequatur laboriosam voluptatum quae, velit maiores necessitatibus minus quia odio quibusdam accusantium dicta iusto doloremque!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus impedit aspernatur odit dolores! Autem fugit atque dicta mollitia tempora, facilis nihil magni necessitatibus iusto obcaecati optio error commodi animi natus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi nemo neque eius sed! Veritatis non eaque officiis et placeat, corporis, blanditiis doloribus, debitis tempora cum illum expedita inventore numquam neque.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate magni quae repellat facilis explicabo quaerat asperiores perferendis adipisci tenetur! Commodi sint doloribus, aut dolor odio repellendus, recusandae amet sunt minus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores esse doloribus cumque rem, nam et expedita amet facere fugit accusamus voluptates explicabo aliquid ullam velit reprehenderit earum delectus, commodi nobis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus magni in est, expedita. Voluptatem rerum cumque impedit minus voluptatum reprehenderit autem ipsa nemo hic, adipisci at animi earum blanditiis voluptas!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt atque ducimus voluptate est, facilis a alias eligendi natus quae fugit veniam distinctio, animi reprehenderit hic sint itaque nam ipsa doloribus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus explicabo voluptatum ut, neque natus, aliquid officiis laudantium rem facere, voluptates inventore impedit doloremque cupiditate nihil veniam, a ipsum deserunt sint.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore fuga iste, totam suscipit illo architecto, repellat? Ad, modi nemo quos, unde quibusdam non iusto repellendus molestias sapiente, nisi dolorem necessitatibus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto recusandae, temporibus officia sed amet molestiae ipsa nesciunt dolorum veritatis voluptas aliquid ullam dolorem rerum ipsam expedita fuga. Vitae, repudiandae fuga.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro modi omnis repellat quaerat, dolores animi voluptatem. Repellendus rem quas, necessitatibus perferendis, neque adipisci obcaecati quasi, porro alias ipsam incidunt sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum harum nihil, sapiente consectetur mollitia quo earum blanditiis ut doloremque, excepturi nobis commodi laborum ea a expedita quae quidem cum dolores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde aliquid, similique ad perferendis recusandae asperiores, dolores, voluptates veritatis placeat molestias sequi eaque velit architecto nulla fugiat maxime cumque nostrum molestiae!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sunt, rem similique dicta. Eos voluptatibus corrupti facere. Itaque similique ducimus voluptate aperiam unde incidunt, magni adipisci facilis, tenetur reiciendis modi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam placeat quia quam magnam natus aperiam repudiandae quos dolore obcaecati, nam ipsa tempore laborum in quisquam, neque magni quidem similique error!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus eum pariatur reprehenderit, quasi blanditiis voluptas corporis adipisci delectus ratione aut placeat eius atque maiores sed eveniet iste, praesentium at esse.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est modi quas, dolorem accusamus odio, voluptate eveniet temporibus illum libero vero voluptatibus deserunt quia ducimus. Laborum quasi unde, vero harum error.
Belum ada Komentar untuk "Konsep CSS Box Model "
Posting Komentar