Tinggi dan Lebar CSS

Lebar elemen ini adalah 100 peratus.

CSS mengatur ketinggian dan lebar

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

Properti height dan width tidak termasuk margin internal, garis batas atau margin eksternal. Mereka mengatur area dalam margin internal, garis batas dan margin eksternal elemen的高度或宽度。

Nilai ketinggian dan lebar CSS

height dan width Properti dapat diatur seperti berikut:

  • auto - Baku. Browser menghitung ketinggian dan lebar.
  • length - Menentukan ketinggian/lebar dalam panjang (contoh px, cm dll).
  • % - Menentukan ketinggian/lebar dalam persen blok yang termasuk.
  • initial - Menata ketinggian/lebar ke nilai baku.
  • inherit - Meneruskan ketinggian/lebar dari nilai induk.

Contoh CSS ketinggian dan lebar

Ketinggian elemen ini adalah 200 pixel, lebarnya adalah 50％

Contoh

Mengatur ketinggian dan lebar elemen <div>:

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

Coba sendiri

Ketinggian elemen ini adalah 100 pixel, lebarnya adalah 500 pixel.

Contoh

Mengatur ketinggian dan lebar elemen <div> lainnya:

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

Coba sendiri

Keterangan:Ingatlah,height dan width Properti tidak termasuk dalam margin internal, garis batas atau margin eksternal! Mereka mengatur area dalam margin internal, garis batas dan margin eksternal elemen的高度/lebar！

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 termasuk (％), atau diatur ke none (nilai baku. berarti tanpa lebar maksimum).

Ketika jendela browser lebih kecil daripada lebar elemen (500px), peristiwa sebelumnya terjadi <div> masalah. kemudian, browser akan menambahkan baris guling ke halaman.

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

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

Ketinggian elemen ini adalah 100 pixel, lebar maksimumnya adalah 500 pixel.

Ketinggian elemen ini adalah 100 pixel, lebar maksimumnya adalah 500 pixel.

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

Contoh

Ketinggian elemen <div> ini adalah 100 pixel, lebar maksimumnya adalah 500 pixel:

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

Coba sendiri

Beberapa contoh lainnya

Mengatur ketinggian dan lebar elemen
Contoh ini memperlihatkan bagaimana mengatur ketinggian dan lebar elemen yang berbeda.
Mengatur ketinggian dan lebar gambar menggunakan persen
Contoh ini memperlihatkan bagaimana mengatur ketinggian dan lebar gambar menggunakan persen.
Mengatur lebar minimum dan maksimum elemen
Contoh ini memperlihatkan bagaimana mengatur lebar minimum dan maksimum elemen menggunakan nilai pixel.
设置最小高度和最大高度元素
本例演示如何使用像素值设置最小高度和最大高度元素。

设置属性尺寸 CSS

属性 描述
height 设置高度元素。
max-height 设置最大高度元素。
max-width 设置最大宽度元素。
min-height 设置最小高度元素。
min-width 设置最小宽度元素。
width 设置宽度元素。