Properti CSS Dimensi
Sifat dimensi CSS memungkinkan Anda untuk mengontrol tinggi dan lebar elemen.
Elemen ini memiliki lebar 100%.
Mengatur tinggi dan lebar
The height dan width sifat yang digunakan untuk mengatur tinggi dan lebar elemen.
The height dan width dapat diatur untuk auto (ini adalah default. Berarti browser menghitung tinggi dan lebar), atau akan ditentukan dalam nilai-nilai panjang, seperti px, cm , dll, atau dalam persen (%) dari blok yang mengandung .
Catatan: height dan width sifat tidak termasuk padding, perbatasan, atau margin; mereka mengatur tinggi / lebar area di dalam padding, border, dan margin elemen!
Contoh berikut menunjukkan <div> elemen dengan ketinggian 100 piksel dan lebar 500 piksel:
Pengaturan max-width
The max-width properti digunakan untuk mengatur lebar maksimum elemen.
The max-width dapat ditentukan dalam nilai-nilai panjang, seperti px, cm , dll, atau dalam persen (%) dari blok yang mengandung, atau diatur none (ini adalah default. Berarti bahwa tidak ada lebar maksimum).
Masalah dengan <div> di atas terjadi ketika jendela browser lebih kecil dari lebar dari elemen (500px). Browser kemudian menambahkan scrollbar horisontal ke halaman.
Menggunakan max-width sebaliknya, dalam situasi ini, akan meningkatkan penanganan browser dari jendela kecil.
Tip: Tarik jendela browser untuk lebih kecil dari 500px lebar, untuk melihat perbedaan antara kedua divs!
Catatan: Nilai dari max-width menimpa properti width .
Contoh berikut menunjukkan <div> elemen dengan ketinggian 100 piksel dan max-lebar 500 piksel:
Coba Sendiri - Contoh
Mengatur tinggi dan lebar elemen
Contoh ini menunjukkan bagaimana untuk mengatur tinggi dan lebar elemen yang berbeda.
Mengatur tinggi dan lebar gambar menggunakan persen
Contoh ini menunjukkan bagaimana untuk mengatur tinggi dan lebar gambar menggunakan nilai persen.
Set min-width dan max-lebar elemen
Contoh ini menunjukkan bagaimana untuk mengatur lebar minimum dan lebar maksimum unsur menggunakan nilai pixel.
Set min-height dan max-height dari unsur
Contoh ini menunjukkan bagaimana untuk mengatur ketinggian minimum dan ketinggian maksimum unsur menggunakan nilai pixel.
Uji Diri dengan Latihan!
Semua CSS Dimensi Properti
| Milik | Deskripsi |
|---|---|
| height | Menetapkan tinggi suatu elemen |
| max-height | Menetapkan ketinggian maksimum elemen |
| max-width | Set lebar maksimum elemen |
| min-height | Menetapkan ketinggian minimum elemen |
| min-width | Set lebar minimum elemen |
| width | Set lebar elemen |