CSS Width/Height
Pada css untuk mengatur lebar dan tinggi sebuah element maka kita memerlukan property Width/Height. Dan untuk value property width/height sebagai berikut :
auto = Value default. Browser menghitung tinggi dan lebar, ini seperti kita memasukan gambar maka lebar dan tinggi akan sesuai dengan gambar asli.
length = Mendefinisikan tinggi/lebar dalam px, cm dll. Value ini yang sering kita pakai.
% = Mendefinisikan tinggi/lebar dalam persen dari element parent.
initial = Mendefinisikan tinggi/lebar mengikuti ke nilai default.
inherit = Mendifinisikan tinggi/lebar mengikuti nilai induknya (parent).
Contoh penggunaan width dan height pada px:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
/* Penggunaan lebar px */
.box-1{
width: 400px;
height: 150px;
background: #f20707;
}
</style>
<body>
<!-- Penggunaan lebar length (px) -->
<div class="box-1">
</div>
</body>
</html>
Kita mengatur lebar 400px dan tinggi 150px (pixel).
Contoh penggunaan width dan height pada inherit :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
/* Penggunaan lebar inherit */
.parent-1{
margin-top: 20px;
width: 400px;
height: 150px;
background: #f20707;
}
.child-1{
width: inherit;
height: 50%;
background: #4c53cf;
}
</style>
<body>
<!-- Penggunaan lebar inherit -->
<div class="parent-1">
<div class="child-1"></div>
</div>
</body>
</html>
Kita mengatur lebar class parent-1 400px dan tinggi 150px dan class child lebar inherit dan tinggi 50%. Yang mana inherit berarti akan mengikuti lebar class parent-1 dan tinggi 50% berarti tinggi setengah dari class parent-1.
Contoh penggunaan width dan height pada persen (%) :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
/* Penggunaan lebar persen */
.parent-2{
margin-top: 20px;
width: 400px;
height: 150px;
background: #f20707;
}
.child-2{
width: 50%;
height: 100%;
background: #4c53cf;
}
</style>
<body>
<!-- Penggunaan lebar persen -->
<div class="parent-2">
<div class="child-2"></div>
</div>
</body>
</html>
Kita mengatur lebar class parent-2 400px dan tinggi 150px kemudia kita atur class child-2 lebar 50% dan tinggi 100% otomatis lebar akan setengah dari class parent-2 dan tinggi akan sama.
Hasil dari contoh diatas sebagai berikut :
Selamat mencoba.