Assalamu alaikum Wr Wb.
Dalam pertemuan kali ini, saya akan memaparkan mengenai Tinggi dan Lebar Pada CSS.
Mengatur tinggi dan lebar
Tag height dan width properti yang digunakan untuk mengatur tinggi dan lebar elemen.
Tag 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.
Contoh<!DOCTYPE html>
<html>
<head>
<style>
div{
height: 200px;
width: 50%;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Elemen Height dan Width</h2>
<p>Elemen div adalah sebuah dari 200px dan sebuah width dari 50%:</p>
<div></div>
</body>
</html>
Hasil
<!DOCTYPE html>Hasil
<html>
<head>
<style>
div{
height: 100px;
width: 500px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set elemen height dan width</h2>
<p>Elemen div adalah sebuah height dari 100px dan sebuah width dari 500px</p>
<div></div>
</body>
</html>
Catatan: Tag height dan width sifat tidak termasuk padding, perbatasan, atau margin; mereka mengatur tinggi / lebar area di dalam padding, border, dan margin elemen!
Pengaturan max-width
Tag max-width properti digunakan untuk mengatur lebar maksimum dari suatu elemen.
Tag 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 div.
Catatan: Nilai dari max-width menimpa properti width.
Contoh berikut menunjukkan <div> elemen dengan ketinggian 100 px dan max-lebar 500px:
Contoh
<!DOCTYPE html>Hasil
<html>
<head>
<style>
div{
max-width: 500px;
height: 100px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set max-width dari elemen</h2>
<p>Elemen div adalah sebuah height dari 100px dan sebuah max-width dari 500px</p>
<div></div>
<p>Merubah ukuran jendela browser untuk melihat efeknya.</p>
</body>
</html>
REFERENSI
http://www.w3schools.com/css/css_dimension.asp
No comments:
Post a Comment