Mengatur tinggi dan lebar di CSS

Seperti yang sudah di jelaskan sebelumnya di sesi pembelajaran div dan span, element HTML di secara garis besar di bagi menjadi dua yaitu element blog-line dan in-line.

element Block-line seperti <div>, <p> dan lain-lain, secara default lebarnya akan memenuhi element parentnya. Sedangkan untuk element yang bersifat In-line element seperti <span>, lebar element akan menyesuaikan kontent yang di muat tanpa terpengaruh oleh parent elementnya. Contoh element bock-line dan in-line sebagai berikut:

Contoh element block-line dan in-line

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>

div {
background:cyan;
}

span {
background:cyan;
}
</style>
</head>
<body>

<div>ini adalah element HTML jenis block-line</div>
<br>
<span>ini adalah element HTML jenis in-line</span>

</body>
</html>

Preview

ini adalah element HTML jenis block-line

ini adalah element HTML jenis in-line

Perhatikan contoh dua elemnet di atas (div dan span), element div adalah element jenis block-line secara default lebarnya memenuhi parent elementnya yakni element body.

Element span adalah element jenis in-inline yang lebarnya mengikuti kontentnya.

Dengan CSS, kita dapat mengatur tinggi dan lebar element HTML sesui selera kita.

Property Width di CSS

Width di CSS adalah property yang di gunakan untuk mengatur ketinggian element HTML.

Contoh penggunaan property width sebagai berikut:

Contoh property width di CSS

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>

.satu {
background:cyan;
width:100px;
}

.dua {
background:gray;
width:10em;
}

.tiga {
background:purple;
width:50%;
}
</style>
</head>
<body>

<div class="satu" >element 1</div>
<div class="dua" >element 2</div>
<div class="tiga" >element 3</div>

</body>
</html>

Preview

element 1

element 2

element 3

Perhatikan properti ini width:50%;, property width dengan satuan persen (%) artinya lebar element adalah persentase dari element induknya (parent element). misalnya, element body lebarnya 100% maka element div dengan class tiga lebarnya separuh dari element body.

Property height di CSS

Selain kita bisa menentukan lebar element HTML, dengan CSS kita juga bisa menentukan tinggi dari element HTML dengan property Height.

Contoh property height di CSS

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>

.satu {
background:cyan;
width:100px;
height:100px;
}

.dua {
background:gray;
width:10em;
height:10em;
}

.tiga {
background:purple;
width:50%;
height:50px;
}
</style>
</head>
<body>

<div class="satu" >element 1</div>
<div class="dua" >element 2</div>
<div class="tiga" >element 3</div>

</body>
</html>

Preview

element 1

element 2

element 3

ZenTutorials