Tinggi dan Lebar CSS

Lebar elemen ini adalah 100 persen.

CSS mengatur tinggi dan lebar

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

Properti tinggi dan lebar tidak termasuk padding, garis batas, atau margin dalam. Mereka mengatur area dalam padding, garis batas, dan margin elemen.

Nilai tinggi dan lebar CSS

height dan width Properti dapat diatur seperti berikut:

  • auto - Default. Browser menghitung tinggi dan lebar.
  • length - Menganugerahi tinggi/lebar dalam panjang (contoh px, cm dll).
  • % - Menganugerahi tinggi/lebar dalam persen blok.
  • initial - Menetapkan tinggi/lebar ke nilai default.
  • inherit - Meneruskan tinggi/lebar dari nilai induk.

Contoh CSS tinggi dan lebar

Tinggi elemen ini adalah 200 pixel, lebar adalah 50%

Contoh

Mengatur tinggi dan lebar elemen <div>:

div {
  tinggi: 200 px;
  lebar: 50%;
  background-color: powderblue;
}

Coba sendiri

Tinggi elemen ini adalah 100 pixel, lebar adalah 500 pixel.

Contoh

Mengatur tinggi dan lebar elemen <div> lainnya:

div {
  tinggi: 100 px;
  lebar: 500 px;
  background-color: powderblue;
}

Coba sendiri

Keterangan:Ingatlah,height dan width Properti ini tidak termasuk padding, garis batas, atau margin dalam! Mereka mengatur area dalam padding, garis batas, dan margin elemen.

Mengatur max-width

max-width Properti digunakan untuk mengatur lebar maksimum elemen.

Dapat ditentukan menggunakan nilai panjang (contoh px, cm dll) atau persen blok yang terkandung (%), atau diatur menjadi none (nilai default. berarti tanpa lebar maksimum).

Ketika jendela browser lebih kecil dari lebar elemen (500 px), terjadi seperti yang disebut sebelumnya <div> masalah. Lalu, browser akan menambahkan bar guling horizontal ke halaman.

Dalam kasus ini, gunakan max-width Dapat memperbaiki penggunaan browser terhadap jendela kecil.

Petunjuk:Seret jendela browser ke lebar yang kurang dari 500 px untuk melihat perbedaan antara dua div!

Tinggi elemen ini adalah 100 pixel, lebar maksimum adalah 500 pixel.

Tinggi elemen ini adalah 100 pixel, lebar maksimum adalah 500 pixel.

Keterangan:max-width Nilai properti akan menimpa width(lebar).

Contoh

Tinggi elemen <div> ini adalah 100 pixel, lebar maksimum adalah 500 pixel:

div {
  max-width: 500 px;
  tinggi: 100 px;
  background-color: powderblue;
}

Coba sendiri

Beberapa contoh lainnya

Mengatur tinggi dan lebar elemen
Contoh ini menunjukkan bagaimana mengatur tinggi dan lebar elemen yang berbeda.
Mengatur tinggi dan lebar gambar menggunakan persen
Contoh ini menunjukkan bagaimana mengatur tinggi dan lebar gambar menggunakan persen.
Mengatur lebar minimum dan maksimum elemen
Contoh ini menunjukkan bagaimana mengatur lebar minimum dan maksimum elemen menggunakan nilai pixel.
Atur tinggi minimum dan maksimum elemen
Contoh ini menunjukkan bagaimana mengatur tinggi minimum dan maksimum elemen dengan nilai piksel.

Atur Properti Ukuran CSS

Properti Deskripsi
height Atur tinggi elemen.
max-height Atur tinggi maksimum elemen.
max-width Atur lebar maksimum elemen.
min-height Atur tinggi minimum elemen.
min-width Atur lebar minimum elemen.
width Atur lebar elemen.