CSS - Box Model

Hai, pada kesempatan kali ini kita akan berbicara tentang box model. Bisa dikatakan setiap elemen itu adalah sebuah kotak yang dalam CSS berguna dalam desain dan tata letak. Dan bagaimana CSS Box Model itu? Konsep umumnya bahwa CSS yang membantu Anda mengukur dan menempatkan anda elemen di mana Anda ingin berada. Jadi, termasuk elemen yang kita bicarakan sebelumnya mengenai Height dan Width.

Saya tahu kita sudah mempraktekkan ini sedikit demi sedikit di beberapa materi yang lain, tetapi disini penggunaannya akan sangat spesifik. Dan salah satu hal pertama Anda perlu diketahui adalah bahwa tinggi dan lebar dari setiap inline elemen adalah kontennya sendiri.

Setiap elemen akan ditampilkan sebagai kotak persegi dengan beberapa sifat yang menentukan ukuran kotak itu, seperti: lebar kotak, tinggi kotak atau jarak antara batas kotak dengan isi kotak dan jarak antara batas kotak dengan elemen di luar kotak.

Jadi, jika Anda memiliki tautan, tinggi dan lebar tautan itu hanyalah teks dari bagian tautan yang dapat diklik. Unsur yang tidak inline, hal itu adalah block, inline block, mereka dapat mengambil properti tinggi dan lebar.

Jadi, setiap kali Anda memiliki sesuatu elemen yang inline, jika Anda memberinya Height dan Width, browser hanya mengabaikannya. Padahal beberapa hal lain yang kami inginkan pikirkan tentang itu, ketika kita memiliki elemen, adalah bagaimana mereka nampak cocok di layar. Sehingga cara termudah bagi Anda untuk menempatkan sesuatu secara strategis halaman Anda adalah untuk menempatkan batas atau border di sekitar mereka. Jadi elemen apa pun dapat memiliki border atau batas di sekelilingnya baik itu inline, atau block, atau block-inline. Dan property border yang menentukan style apa yang Anda inginkan, bagaimana lebranya dan warna apa.

Perhatikan contoh ini:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
  div{
background:#ebebeb;
width:300px;
padding:10px;
border: solid 2px red;
margin: 10px;  
}
</style>
</head>
<body>
<div>
contoh agar lebih paham bahwa text juga adalah elemen yang punya tinggi dan lebar, batas, space yang anda bisa kreasikan agar web tampak lebih menarik.
<br>content : kotak berisi image atau teks  </br>
<br>padding : space transparan yang membungkus content</br>
<br>border : batas garis mengitari padding/content</br>
<br>margin : space transparan yang membungkus elemen HTML, dalam hal ini kotak (box). Dengan margin kita bisa menggeser elemen HTML tersebut ke kanan, kiri, bawah dan  atas</br>
</div>
</body>
</html>
Hasilnya:

boxmodel1

Oke, mungkin sudah sedikit paham setelah melihat contoh diatas. Jadi anda saat mengatur lebar dan tinggi suatu elemen, anda hanya mengatur ukuran area content sedangkan untuk menghitung lebar atau tinggi sebenarnya kita harus menambahkan padding, margin dan border yang sudah kita set pada elemen tersebut.

Nah ketika anda harus memutuskan apa jenis style yang Anda inginkan. Jadi, dalam hal ini, saya sudah mengatakan, untuk semua div, saya ingin mereka memiliki satu piksel perbatasan yang solid di sekelilingnya,border style yang ingin Anda tentukan, sementara kebanyakan orang selalu menggunakan yang solid (border dengan style garis lurus), ada banyak style yang berbeda. Anda dapat menggunakan Dot (titik-titik), Dashed (putus-putus), Double (border dengan dua garis lurus), Ridge (bergerigi), inset, outset. Ada banyak perbedaan hal-hal yang dapat Anda lakukan, dan itu benar-benar semacam style yang berbeda yang bisa anda coba.

Nilai Keterangan
None tidak memiliki border
Dot Border dengan sytle titik – titik
Dashed Border dengan style garis lurus putus-putus
Solid Border dengan style garis lurus
Double Border denga sytle 2 garis lurus
Groove Border beralur 3D. Efeknya tergantung pada nilai border-color
Ridge Border bergerigi 3D. Efeknya tergantung pada nilai border-color
Insert Border yang berada di dalam dengan 3D Efeknya tergantung pada nilai border-color
Outset Mendefinisikan awal border 3D. Efeknya tergantung pada nilai border-color

Lihat contoh untuk border dengan style double:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
  div{
background:#ebebeb;
width:300px;
padding:10px;
border-style: double;
border-width: 5px;
margin: 10px;  
}
</style>
</head>
<body>
<div>
contoh border double, border denga sytle 2 garis lurus

</div>
</body>
</html>
Hasilnya:

boxmodel2