MENGATUR TINGGI DAN LEBAR KOTAK BOX WEBSITE DENGAN CSS

A. Box Model

Box model merupakan sebuah konsep di mana setiap elemen pada halaman website dianggap layaknya sebagai sebuah kotak Box. Box ini yang kemudian membangun struktur desain dan layout dari sebuah website. Konsep box ini melekat pada setiap elemen HTML.

B. Heigh dan Width

Property height menentukan tinggi box, sedangkan width menentukan lebar box. Jika memberi background pada tag <div> dengan CSS, biasanya background tidak akan tampil jika belum mengatur lebar dan tinggi box dengan property ini.

Pada properti width dan height dapat diberikan nilai sebagai berikut:

• auto– Ini adalah default. Browser menghitung width dan height secara otomatis
• length – Mengatur width atau height dengan px, cm, pt dll
• % – Mengatur width atau height dengan persen
• initial – Mengatur width atau height ke nilai default
• inherit – Mengatur width atau height ke nilai warisan dari elemen induknya

#merah {
    background-color: red;
    width: 150px;
    height: 80px;
}
#biru {
    background-color: blue;
    width: 220px;
    height: 80px;
}
#hijau {
    background-color: green;
    width: 270px;
    height: 80px;
}

C. Property lain untuk width dan Heigh

Property lain yang berhubungan dengan width dan height

Properti	Kegunaanya
width	Memberikan lebar pada suatu elemen
max-width	Memberikan lebar maksimal pada suatu elemen
min-width	Memberikan lebar minimal pada suatu elemen
height	Memberikan tinggi pada suatu elemen
max-height	Memberikan tinggi maksimal pada suatu elemen
min-height	Memberikan lebar minimal pada suatu elemen

max-width, max-height
Max-width digunakan untuk menentukan lebar maksimal dan max-height digunakan untuk menentukan tinggi maksimal.

Contoh:
Kotak box yang berwarna hijau tidak bisa mempunyai lebar lebih dari 200px, tetapi bisa mempunyai lebar 200px atau dibawahnya, dan tinggi box hijau tidak akan bisa mempunyai tinggi lebih dari 50px, tetapi bisa mempunyai tinggi 50px atau dibawahnya.
Kotak box berwarna kuning, yang tidak mempunyai batas lebar maksimal maupun tinggi maksimal.

#hijau {
    background-color: green;
    max-width: 200px;
    max-height: 50px;
}
#kuning {
    background-color: yellow;
}

Min-width dan min-height
Min-width digunakan untuk menentukan lebar minimal dan min-height digunakan untuk menentukan tinggi minimal

Contoh
box yang berwarna merah tidak akan bisa mempunyai lebar dibawah 300px, tetapi bisa mempunyai lebar 300px atau diatasnya, dan tinggi box merah tidak akan bisa mempunyai tinggi dibawah 100px, tetapi bisa mempunyai tinggi 100px atau diatasnya
box berwarna oren, yang tidak mempunyai batas lebar minimal maupun tinggi minimal.

#merah {
    background-color: red;
    min-width: 300px;
    min-height: 100px;
}
#oren {
    background-color: orange;
}