Properti min-width

Properti min-width menetapkan lebar minimum elemen. Nilai properti dapat berupa satuan ukuran apa pun atau kata kunci none, yang berarti tidak ada nilai.

Biasanya ditetapkan untuk elemen dengan lebar mengambang (lebar ditetapkan dalam persentase atau tidak ditetapkan sama sekali, dan elemen melebar sesuai dengan kontennya). Jika lebar elemen ditetapkan dalam persentase - saat jendela browser diperkecil, lebarnya akan berkurang hingga mencapai nilai min-width.

Sintaksis

selektor {
	max-width: nilai;
}

Contoh

Dalam contoh ini, lebarnya adalah persentase dari lebar induk. Perkecil jendela browser secara lebar, dan container juga akan mengecil untuk menyesuaikan diri dengan lebar jendela browser. Namun, container hanya akan mengecil hingga ukuran yang ditentukan dalam min-width, yaitu 400px. Setelah container mencapai lebar ini - container akan berhenti mengecil:

<div id="elem"></div>

#elem {
	width: 70%;
	min-width: 400px;
	height: 300px;
	border: 1px solid black;
}

Contoh

Dalam contoh ini, lebar container dibatasi dari kedua sisi: container tidak bisa menjadi lebih besar dari 900px dan lebih kecil dari 400px:

<div id="elem"></div>

#elem {
	width: 70%;
	min-width: 400px;
	max-width: 900px;
	height: 100px;
	border: 1px solid black;
}

Lihat juga

properti max-width,
yang menetapkan lebar maksimum elemen
properti max-height,
yang menetapkan tinggi maksimum elemen
properti min-height,
yang menetapkan tinggi minimum elemen