CSS - Ukuran Kotak

Setelah mengetahui cara penggunan CSS Border pada Model Box, saya ingin menambahkan satu opsi lagi, yang bahkan penting juga dalam pembuatan website yang disebut box-sizing. Dalam pembuatan website, tentunya kita menentukan terlebih dahulu ukuran layout-nya baik itu lebar layout), tinggi layout, dan juga margin dan padding. Fitur ini sebenarnya berguna karena sedikit menghilangkan pusing yang biasa timbul saat sedang membuat layout web. Dimana biasanya kita menentukan lebar layout yang kita inginkan terlebih dahulu baru menentukan lebar sidebar dan conten web.

Apa yang dilakukan Box sizing adalah membutuhkan beberapa matematika dipikiran anda tentang ketinggian aditif dan lebar aditif sebuah website. Anda harus mengingatnya berapa banyak ruang yang Anda gunakan, begitu pun dengan border-box, yang mengambil lebarnya, konten, padding, dan perbatasan sehingga semuanya menjadi pertimbangan.

Lebih jelasnya seperti ini, anda sudah perhitungkan bahwa lebar layout yaitu 600px. Kemudian membaginya menjadi 2 kolom, kiri dan kanan, kiri 200px dan kanan 400px. Setelah dibuat ternyata lebar 600px tidak cukup karena seharusnya ada ukuran padding dan border juga. Apalagi jika anda ingin menggunakan div yang memiliki lebar dan tinggi sesuai dengan yang kita inginkan. Masih ingatkan tentang perhitungan Box Model. Jadi bisa dikatakan ketika kita ingin lebar 200px, itu tidak akan benar-benar anda bisa buat elemen 600 piksel. Hasilnya malah 600 piksel minus padding dan border. Salah satu hal terakhir yang harus diingat adalah bahwa kita akan mempertimbangkan padding dan border, namun tidak akan memperhitungkan margin akun. Perhatikan contoh berikut:

<!DOCTYPE html>
<html>
<head>
<title>box-sizing</title>
    <style>
	* {padding: 0; margin: 0}
	.container {
	   width: 300px;
	   margin: auto;
           background-color: lightblue;
	}
	.container img {
           width: 100%;
	   padding: 20px;
	}
    </style>
</head>
<body>
<div class="container">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQez9qTMxQpskwWAgF6WMQMB-QTbyH_BGeIr4CbQFlOPrtKhEu_5g">
  <p>Gambar ini cuma sebagai contoh begitu pusingnya mengatur layout webiste.
Namun anda bisa menggunakan fitur CSS box-sizing yang bisa membantu menentukan ukuran layout sebenarnya

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

box1

Nampak gambar keluar dari layout yang kita perkirakan. Maka pada contoh di atas, agar gambar tetap di dalam layout dan tetap ada padding pada sisi gambar maka harus ditambahkan property box-sizing.

Diantara property box-sizing adallah:

box-sizing: content-box; Ini adalah nilai default dimana Lebar dan tinggi hanya menyertakan content, jadi tidak termasuk border, padding dan margin.

box-sizing: padding-box; Lebar dan tinggi sudah berdasarkan padding atau sudah termasuk padding namun belum termasuk border dan margin.

box-sizing: border-box; Ini sudah termasuk lebar dan tinggi dimana berdasarkan padding dan border atau sudah termasuk padding dan border namun tidak termasuk margin.

box-sizing: inherit; Valuenya dari property box-sizing yang mengikuti aturan element induk sebelumnya.

Dari penjelasan diatas, untuk contoh kita, agar gambar masuk dalam layout kita gunakan border-box. Fungsi dari border-box memberikan efek content tetap di dalam sisi layout walaupun ditambahkan border, atau padding. Bahkan gambar akan tetap berada di dalam layout, meski value border dan padding semakin besar ( ukuran content diwajibkan harus 100%, atau sesuai dengan ukuran lebar dari layout ).

Ayo kita coba tambahkan box-sizing: border-box;

<!DOCTYPE html>
<html>
<head>
<title>box-sizing</title>
    <style>
	* {padding: 0; margin: 0}
	.container {
	   width: 300px;
	   margin: auto;
           background-color: lightblue;

	}
	.container img {
           width: 100%;
	   padding: 20px;
	   box-sizing: border-box;

	}
    </style>
</head>
<body>
<div class="container">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQez9qTMxQpskwWAgF6WMQMB-QTbyH_BGeIr4CbQFlOPrtKhEu_5g">
  <p>Gambar ini cuma sebagai contoh begitu pusingnya mengatur layout webiste.
Namun anda bisa menggunakan fitur CSS box-sizing yang bisa membantu menentukan ukuran layout sebenarnya

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

boxsizing2

Jadi lakukan lagi uji coba, simpan dan kembali. Dan Anda dapat melihat bahwa tampilan sudah sesuai dengan depan lebar yang diinginkan. Kita harus menggunakan semacam kombinasi tampilan, dan tinggi, dan lebar, dan padding. Jadi ayo lakukan dan lakukan itu semisal apakah saya akan melanjutkan dan mengubah lebar ke 50%, untuk mengetahui akibatmya, karena ini kesalahan yang sangat umum dilakukan orang.

Lakukan desain dulu, kode kedua. Hal kedua yang Anda mungkin lakukan adalah menggunakan Model Box untuk mengurangi kompleksitas kode Anda. Atau paling tidak kerumitan matematika Anda mencoba untuk mencari tahu apa yang cocok, apa pun yang Anda lakukan, Anda perlu mengingat margin mesti selalu harus dipertimbangkan. Ini bisa menjadi rumit ketika Anda pertama kali memulai mencoba menyatukan halaman Anda, dan menyelesaikan segala sesuatunya dengan tepat di mana Anda ingin mereka berada. Pastikan Anda bermain dengan semua kode-kode yang lalu, bahwa Anda bermain dengan margin, Anda bermain dengan padding, Anda bermain dengan border. Karena itulah cara Anda akan mewujudkannya desain sketsa di atas kertas pertama.

Dan jangan khawatir, kita semua melakukan kesalahan. Dan saya pikir halaman website Anda semoga semakin dekat dan lebih dekat dengan yang Anda inginkan.