Menentukan Lebar dan Tinggi Elemen Dengan CSS

Properti CSS height dan width digunakan untuk mengatur tinggi dan lebar dari suatu elemen. Properti CSS max-width digunakan untuk mengatur lebar maksimum elemen. Properti-properti ini termasuk dalam kelompok properti CSS yang mengatur dimensi (ukuran) suatu elemen HTML.

Properti height dan width tidak dihitung menyertakan nilai padding, border, atau margin. Properti-properti ini mengatur tinggi/lebar area di dalam padding, border, dan margin.

Nilai CSS height dan width

Properti height dan width memiliki nilai berikut:

auto – Ini merupakan default, secara otomatis browser menghitung tinggi dan lebar.
length – Menentukan tinggi/lebar dalam px, cm, dll.
% – Menentukan tinggi/lebar dalam persen dari blok yang memuatnya
initial – Mengubah tinggi/lebar ke nilai defaultnya
inherit – Tinggi/lebar akan diwariskan dari nilai elemen induk

Referensi Semua Properti Dimensi CSS

Properti height CSS

Contoh

Menetapkan tinggi dua elemen <div> :

<!DOCTYPE html>
<html>
<head>
<style>
div.a {
  height: auto;
  border: 1px solid black;
}

div.b {
  height: 50px;
  border: 1px solid black;  
}
</style>
</head>
<body>
<h1>Properti height</h1>

<h2>height: auto (default)</h2>
<div class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nil nec interdum maximus, augue diam porttitor lorem, dan sollicitudin felis neque sit amet erat.</div>

<h2>height: 50px</h2>
<div class="b">Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nil nec interdum maximus, augue diam porttitor lorem, dan sollicitudin felis neque sit amet erat.</div>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti height mengatur tinggi elemen.

Tinggi suatu elemen tidak termasuk padding, border, atau margin!

Jika height: auto; elemen akan secara otomatis menyesuaikan tingginya agar kontennya dapat ditampilkan dengan benar.

Contoh

Menetapkan tinggi elemen menjadi 50% dari tinggi elemen induk:

<!DOCTYPE html>
<html>
<head>
<style>
#parent {
  height: 100px;
  width: 250px;
  border: 2px solid blue;  
}

#child {
  height: 50%;
  width: 75%;
  border: 2px solid red;  
}
</style>
</head>
<body>
<h1>Properti height</h1>

<div id="parent">
  <div id="child">Tinggi saya setengah dari tinggi orang tua saya.</div>
</div>

</body></html>

Jalankan Contoh

Properti max-height CSS

Contoh

Menetapkan tinggi maksimum elemen <p> menjadi 50 piksel:

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  max-height: 50px;
  overflow: auto;
}
</style>
</head>
<body>
<h1>Properti max-height</h1>

<h2>max-height: none (default)</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nil nec interdum maximus, augue diam porttitor lorem, dan sollicitudin felis neque sit amet erat.</p>

<h2>max-height: 50px</h2>
<p class="ex1">Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nil nec interdum maximus, augue diam porttitor lorem, dan sollicitudin felis neque sit amet erat.</p>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti max-height menentukan tinggi maksimum elemen.

Properti max-width CSS

Contoh

Menetapkan lebar maksimum elemen <p> menjadi 150 piksel:

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  max-width: 150px;
}
</style>
</head>
<body>
<h1>Properti max-width</h1>

<h2>max-width: none (default)</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nil nec interdum maximus, augue diam porttitor lorem, dan sollicitudin felis neque sit amet erat.</p>

<h2>max-width: 150px</h2>
<p class="ex1">Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nil nec interdum maximus, augue diam porttitor lorem, dan sollicitudin felis neque sit amet erat.</p>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti max-width menentukan lebar maksimum elemen.

Jika konten lebih besar dari lebar maksimum, tinggi elemen akan otomatis berubah.

Jika konten lebih kecil dari lebar maksimum, properti max-width tidak berpengaruh.

Catatan: Ini mencegah nilai properti width menjadi lebih besar dari max-width. Nilai properti max-width menggantikan properti width.

Contoh

Atur lebar maksimum elemen <p> menjadi 50% :

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  max-width: 50%;
}
</style>
</head>
<body>
<h1>Properti max-width</h1>

<h2>max-width: none (default)</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nil nec interdum maximus, augue diam porttitor lorem, dan sollicitudin felis neque sit amet erat.</p>

<h2>max-width: 50%</h2>
<p class="ex1">Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nil nec interdum maximus, augue diam porttitor lorem, dan sollicitudin felis neque sit amet erat.</p>

</body></html>

Jalankan Contoh

Properti min-height CSS

Contoh

Menetapkan tinggi minimal elemen <p> menjadi 200 piksel:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  background-color: yellow;  
}

p.ex1 {
  min-height: 100px;
}
</style>
</head>
<body>
<h1>Properti min-height</h1>

<h2>min-height: none (default)</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam at erat pulvinar, at pulvinar felis blandit...</p>

<h2>min-height: 200px</h2>
<p class="ex1">Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam at erat pulvinar, at pulvinar felis blandit...</p>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti min-height menentukan tinggi minimum suatu elemen.

Jika konten lebih kecil dari tinggi minimum, tinggi minimum akan diterapkan.

Jika konten lebih besar dari tinggi minimum, properti min-height tidak berpengaruh.

Properti min-width CSS

Contoh

Menetapkan lebar minimum untuk elemen <span> menjadi 500 piksel:

<!DOCTYPE html>
<html>
<head>
<style>
span {
  background-color: yellow;  
}

span.ex1 {
  min-width: 500px;
  display: inline-block;
}
</style>
</head>
<body>
<h1>Properti min-width</h1>

<h2>min-width: none (default)</h2>
<span>Lorem ipsum dolor sit amet...</span>

<h2>min-width: 500px</h2>
<span class="ex1">Lorem ipsum dolor sit amet...</span>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti min-width menentukan lebar minimum elemen.

Jika konten lebih kecil dari lebar minimum, lebar minimum akan diterapkan.

Jika konten lebih besar dari lebar minimum, properti min-width tidak berpengaruh.

Properti width CSS

Contoh

Menetapkan lebar tiga elemen <div>:

<!DOCTYPE html>
<html>
<head>
<style>
div.a {
  width: auto;
  border: 1px solid black;
}

div.b {
  width: 150px;
  border: 1px solid black;  
}

div.c {
  width: 50%;
  border: 1px solid black;  
}
</style>
</head>
<body>
<h1>Properti width</h1>

<h2>width: auto (default)</h2>
<div class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nil nec interdum maximus, augue diam porttitor lorem, dan sollicitudin felis neque sit amet erat.</div>

<h2>width: 150 px</h2>
<div class="b">Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nil nec interdum maximus, augue diam porttitor lorem, dan sollicitudin felis neque sit amet erat.</div>

<h2>width: 50%</h2>
<div class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nil nec interdum maximus, augue diam porttitor lorem, dan sollicitudin felis neque sit amet erat.</div>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti width mengatur lebar elemen.

Lebar elemen tidak termasuk padding, border, atau margin!

Contoh

Menetapkan lebar elemen <img> menggunakan nilai persen:

<!DOCTYPE html>
<html>
<head>
<style>
img.normal {
  width: auto;
}

img.big {
  width: 50%;
}

img.small {
  width: 10%;
}
</style>
</head>
<body>
<h1>Properti width</h1>

<img class="normal" src="logocss.png" width="95" height="84"><br>
<img class="big" src="logocss.png" width="95" height="84"><br>
<img class="small" src="logocss.png" width="95" height="84">

</body></html>

Jalankan Contoh

Contoh

Menetapkan lebar elemen <input type=”text”> menjadi 100px. Namun, ketika mendapatkan fokus oleh cursor, buat lebarnya menjadi 250px:

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
  width: 100px;
  -webkit-transition: width .35s ease-in-out;
  transition: width .35s ease-in-out;
}
input[type=text]:focus {
  width: 250px;
}
</style>
</head>
<body>
<h1>Properti width</h1>

<p>Atur lebar input text menjadi 100px. Namun, saat kolom input mendapatkan fokus, buat lebarnya menjadi 250px:</p>

Cari: <input type="text" name="search">

</body></html>

Jalankan Contoh

Tutorial sebelumnya : Padding CSS
Tutorial setelahnya : CSS Box Model
Semua Tutorial CSS : Tutorial CSS