Box Model - Height dan Width

Dua Jendela Friday, November 12, 2021

Sumber :laptrinhx.com

7. Property CSS

a) Box Model

merupakan sebuah konsep dimana setiap elemen halaman website kita anggap seabgai sebuah kotak (box). Box inilah yang akan kemudian membangun struktur desain dan layout dari website. Pembahasan yang akan kita pelajari meliputi :

1. Height dan Width

2. Margin dan Padding

3. Border dan Outline

4. Position

5. Overflow

6. Float dan Clear

7. Display dan Visibility

Masing-masing keterangannya sebagai berikut :

1. Height dan Width

- Property height menentukan tinggi box
- property Width menentukan lebar box
- Nilai dari property ini merupakan angka dengan satuan biasanya px atau %

Property lain yang berhubungan dengan width dan height sebagai berikut :

>Max-width, lebar menyesuaikan konten tetapi tidak melebihi batas yang ditentukan.
>Max-height, tinggi menyesuaikan konten tetapi tidak melebihi batas yang ditentukan.
>Min-width, lebar menyesuaikan konten tetapi tidak kurang dari batas yang ditentukan.
>Min-height, tinggi menyesuaikan konten tetapi tidak kurang dari batas yang ditentukan.

Berikut adalah contoh script penggunaan width dan height dengan nama file width height.html sebagai berikut :

<html>
<head>
<title>Latihan CSS</title>
<style type="text/css">
.kotak{
   background:red;
   width:200px;
   height:100px;
}
</style>
</head>
<div class="kotak"></div>
</html>

Pada website akan terlihat sebagai berikut :

Kita ubah ukurab width dan height ke max

<html>
<head>
<title>Latihan CSS</title>
<style type="text/css">
.kotak{
   background:red;
   min-width:200px;
   min-height:100px;
}
</style>
</head>
<div class="kotak"></div>
</html>

Pada website akan terlihat sebagai berikut :

Semoga bermanfaat buat sobat yang baru tau👊👊👋😉