Dimensi Tinggi dan Lebar CSS ~ KODELOVER

Mengatur tinggi dan lebar

Sifat tinggi dan lebar digunakan untuk mengatur tinggi dan lebar elemen.

properti Dimensi CSS

properti dimensi CSS memungkinkan Anda mengontrol tinggi dan lebar elemen.

Unsur ini memiliki lebar 100%.

Tinggi dan lebar bisa diatur ke auto (ini adalah default. Berarti browser menghitung tinggi dan lebar), atau ditentukan dengan nilai panjang, seperti px, cm, dll, atau dalam persen (%) dari yang mengandung blok.

Elemen <div> ini memiliki tinggi 100 piksel dan lebar 500 piksel.

Catatan: Sifat tinggi dan lebar tidak termasuk padding, border, atau margin; itu berarti mengatur tinggi / lebar area di dalam padding, border, dan margin of the element!

Contoh berikut menunjukkan elemen <div> dengan tinggi 100 piksel dan lebar 500 piksel:
Contoh

div {
    width: 500px;
    height: 100px;
    border: 3px solid # 73AD21;
}

Setting max-width

properti max-width digunakan untuk mengatur lebar maksimum elemen.

max-width dapat ditentukan dengan nilai panjang, seperti px, cm, dll., Atau dalam persen (%) dari blok yang mengandung, atau set ke none (ini adalah default. Artinya tidak ada lebar maksimum).

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

Dengan menggunakan lebar maksimal, dalam situasi ini, akan memperbaiki penanganan browser pada jendela kecil.

Tip: Tarik jendela browser ke lebar lebih kecil dari 500px, untuk melihat perbedaan antara kedua divs!

Elemen <div> ini memiliki tinggi 100 piksel dan lebar maksimal 500 piksel.

Catatan: Nilai lebar maksimum properti menimpa lebar.

Contoh berikut menunjukkan elemen <div> dengan tinggi 100 piksel dan lebar maksimal 500 piksel:
Contoh

div {
    max-width: 500px;
    height: 100px;
    border: solid 3px # 73AD21;
}

Semua Dimensi properti CSS

height menetapkan tinggi elemen
max-height mengatur tinggi maksimum elemen
max-width menetapkan lebar maksimum elemen
min-height mengatur tinggi minimum elemen
min-width menetapkan lebar minimum elemen
Width menetapkan lebar elemen

KODELOVER

Dimensi Tinggi dan Lebar CSS

Related Post