Sebelumnya sudah dibahas mengenai konsep box model dalam CSS di halaman berikut ini. Kini akan dibahas bagaimana menghitung ukuran box yang ada dalam box model CSS sebagai berikut ini. Perhitungan ini sangat penting karena untuk mengukur tiap widget dalam halaman website yang akan dibuat, seperti header, content, sidebar, dsb.
Menghitung Lebar dan Tinggi Box
Disini kalian bisa mencoba script berikut yang menampilkan box dengan warna kuning serta memiliki nilai width (lebar) dan height (tinggi) yang sudah dikustomisasi yang berada pada internal CSS dalam tag <div>.
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Web Dasar</title>
<style>
div{
width: 400px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
Hasil di browser
.png)
Dan coba buka inspect element sesuai dengan web browser yang digunakan, bisa mencarinya di Google dengan kata kunci "Inspect Element (web browser yang digunakan)". Lalu klik tag <div> </div> sesuai dengan tempat diaturnya script CSS tadi.
.png)
Dapat dilihat bahwa ukuran box tersebut sebesar 400x200 piksel. Namun seperti penjelasan box model CSS sebelumnya, disana terdapat padding, border, dan margin, diluar bagian content yang sudah diatur width dan height nya. Karena tidak menggunakan 3 bagian box model CSS, maka ketiganya tidak ada nilainya.
Tambahkan script berikut kedalam bagian div {} CSS.
div{
width: 400px;
height: 200px;
background-color: yellow;
padding: 20px 10px 15px 20px;
margin: 20px 10px 15px 20px;
border: 10px solid black;
}
Hasil di browser
.png)
Lalu cek kembali menggunakan inspect element
.png)
Dapat dilihat bahwa ukuran box tersebut mengalami penambahan ukuran width dan height dikarenakan adanya 3 bagian dalam box model CSS, walaupun ukuran width dan height nya tidak berubah sama sekali. Bagaimana cara menghitung ukuran box ini ?. Kita dapat menghitungnya sebagai berikut.
Total width (lebar) : 400px + (20px + 10px) + (10px + 10px) + (20px + 10px) = 480px
Total height (tinggi) : 200px + (20px + 15px) + (10px + 10px) + (20px + 15px) = 290px
Perhitungan ini berdasarkan panjang dan lebar aslinya, lalu ditambah dengan padding di kedua sisi panjang dan lebarnya, begitupun dengan kedua sisi border dan margin. Sehingga ukuran box diatas bukan lagi 400x200 piksel, melainkan 480x290 piksel. Ukuran box ini dapat disesuaikan dengan ukuran layar monitor yang digunakan, agar sesuai dengan tampilan monitor ketika ditampilkan kedalam web browser.
Kesimpulan
Dalam box model CSS, ukuran sebuah box tidak hanya ditentukan dari ukuran width dan height nya saja. Melainkan harus memperhitungkan padding, border dan marginnya juga. Mengapa ini diperlukan ? Karena agar dapat merancang layout tampilan website dengan baik dan sesuai dengan ukuran layar monitor penggunanya, walaupun ini bisa diselesaikan juga dengan membuat halaman website yang responsif.
0 Komentar