CSS Max-Min Width

by

Sebelumnya sudah saya bahas tentang mengatur width dan height di css. Kamu juga bisa mengatur nilai dari maksimal keduanya.

Supaya lebih jelas, perhatikan dua kotak berikut:

elemen ini width 500px;

elemen ini max-width: 500px;

Lihat, gak ada bedanya kan? wkwkwk

Coba kamu kecilkan panjang browsermu ke ukuran yang paling kecil. Nanti efeknya seperti ini:

Nah sudah paham kan bedanya? Jadi, kamu tinggal hanya menggunakan property css max-width aja. Kode yang saya pakai diatas:

<style>
div.contoh1 {
  width:500px;
  margin: auto;
  border: 5px solid #5340ff;
}

div.contoh2 {
  max-width:500px;
  margin: auto;
  border: 5px solid #5340ff;
}
</style>
<div class="contoh1">elemen ini width 500px;</div><br>
<div class="contoh2">elemen ini max-width: 500px;</div>

Leave a Comment