CSS

Height/Width di CSS: Cara Menset dan Codenya

Pengaturan Tinggi dan Lebar CSS

Properti height dan width digunakan untuk mengatur tinggi dan lebar elemen.

Properti tinggi dan lebar tidak termasuk padding, batas, atau margin. Properti ini mengatur tinggi / lebar area di dalam padding, border, dan margin.

Nilai tinggi dan lebar CSS

Properti height dan width mungkin memiliki nilai berikut:

  • auto – Browser menghitung tinggi dan lebar(default).
  • length – Mendefinisikan tinggi / lebar dalam px, cm dll.
  • % – Mendefinisikan tinggi / lebar dalam persen dari blok penampung
  • initial – Menetapkan tinggi / lebar ke nilai defaultnya.
  • inherit – Tinggi / lebar akan diwarisi dari nilai induknya.

Contoh Properti Tinggi dan Lebar CSS

Contoh :

Set properti height dan width di dalam elemen <div>:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}
</style>
</head>
<body>

<h2>Setel tinggi dan lebar di dalam elemen </h2>

<p>elemen div ini memiliki tinggi 200px dan lebar 50%:</p>

<div></div>

</body>
</html>

Contoh :

Set properti height dan width di dalam elemen <div> yang lain:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}
</style>
</head>
<body>

<h2>Setel tinggi dan lebar di dalam elemen </h2>

<p>elemen div ini memiliki tinggi 100px dan lebar 50%:</p>

<div></div>

</body>
</html>

Catatan: Ingatlah bahwa properti height dan width tidak menyertakan padding, border, atau margin! Propeti ini mengatur tinggi / lebar area di dalam elemen padding, border, dan margin !

Menyetel Lebar-Maksimal

Properti max-width digunakan untuk mengatur lebar maksimum sebuah elemen. max-width dapat ditentukan dalam nilai panjang, seperti px, cm, dll., Atau dalam persen (%) dari blok penampung atau disetel ke tidak ada (default. Berarti tidak ada lebar maksimum).

Masalah dengan <div> di atas terjadi saat jendela browser lebih kecil dari lebar elemen (500px). Browser kemudian menambahkan scrollbar horizontal ke halaman.

Tip: Seret jendela browser menjadi lebih kecil dari lebar 500px untuk melihat perbedaan antara kedua div!

Catatan: Nilai properti max-width menggantikan width.

Contoh
Elemen ini memiliki tinggi 100 piksel dan lebar maksimal 500 piksel:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}
</style>
</head>
<body>

<h2> Setel lebar maksimal sebuah elemen </h2>
<p> Elemen div ini memiliki tinggi 100px dan lebar maksimal 500px: </p>

<div> </div>

<p> Ubah ukuran jendela browser untuk melihat efeknya. </p>

</body>
</html>

Properti Dimensi CSS

PropertiDeskripsi
heightMenyetel tinggi suatu elemen
max-heightMenyetel tinggi maksimum sebuah elemen
max-widthMenyetel lebar maksimum sebuah elemen
min-heightMenetapkan tinggi minimum sebuah elemen
min-widthMenyetel lebar minimum sebuah elemen
widthMenyetel lebar suatu elemen

Hanifah Nurbaeti

Share
Tags: CSSHeight CSSWidth CSS