Belajar CSS (14. max-width)

Akhi Syabab

Max-width Dalam CSS

Dalam mengatur lebar, kita sering menggunakan width sebagai property, ex.

div {
    width:500px;
    margin: auto;
    border: 3px solid #73AD21;
}

maka settingan diatas akan membuat ukuran border tetap yaitu 500px saat browser di perkecil kurang dari 500px , jadi akan ada bagian border yang tidak terlihat. Bagaimana cara mengatasinya?
caranya yaitu menggunakan properti max-width
ex.

<!DOCTYPE html>
<html>
<head>
	<style>
		div.ex1 {
		    width:500px;
		    margin: auto;
		    border: 3px solid #73AD21;
		}

		div.ex2 {
		    max-width:500px;
		    margin: auto;
		    border: 3px solid #73AD21;
		}
	</style>
</head>
<body>
	<div class="ex1">This div element has width: 500px;</div> <br>
	<div class="ex2">This div element has max-width: 500px;</div>
	<p><strong>cara mengecek:</strong> geser atau perkecil browser anda kurang dari 500px , maka anda akan mengetahui perbedaanya</p>

</body>
</html>

hasil

Semoga Bermanfaat.

Written by @akhi_syabab