Section Artikel
Pengaturan Tinggi dan Lebar CSS
Properti height dan width digunakan untuk mengatur tinggi dan lebar elemen.
Properti tinggi dan lebar tidak termasuk padding, batas, atau margin. Properti ini mengatur tinggi / lebar area di dalam padding, border, dan margin.
Nilai tinggi dan lebar CSS
Properti height dan width mungkin memiliki nilai berikut:
auto– Browser menghitung tinggi dan lebar(default).length– Mendefinisikan tinggi / lebar dalam px, cm dll.%– Mendefinisikan tinggi / lebar dalam persen dari blok penampunginitial– Menetapkan tinggi / lebar ke nilai defaultnya.inherit– Tinggi / lebar akan diwarisi dari nilai induknya.
Contoh Properti Tinggi dan Lebar CSS
Contoh :
Set properti height dan width di dalam elemen <div>:
<!DOCTYPE html> <html> <head> <style> div { height: 200px; width: 50%; background-color: powderblue; } </style> </head> <body> <h2>Setel tinggi dan lebar di dalam elemen </h2> <p>elemen div ini memiliki tinggi 200px dan lebar 50%:</p> <div></div> </body> </html>
Contoh :
Set properti height dan width di dalam elemen <div> yang lain:
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Setel tinggi dan lebar di dalam elemen </h2>
<p>elemen div ini memiliki tinggi 100px dan lebar 50%:</p>
<div></div>
</body>
</html>
Catatan: Ingatlah bahwa properti height dan width tidak menyertakan padding, border, atau margin! Propeti ini mengatur tinggi / lebar area di dalam elemen padding, border, dan margin !
Menyetel Lebar-Maksimal
Properti max-width digunakan untuk mengatur lebar maksimum sebuah elemen. max-width dapat ditentukan dalam nilai panjang, seperti px, cm, dll., Atau dalam persen (%) dari blok penampung atau disetel ke tidak ada (default. Berarti tidak ada lebar maksimum).
Masalah dengan <div> di atas terjadi saat jendela browser lebih kecil dari lebar elemen (500px). Browser kemudian menambahkan scrollbar horizontal ke halaman.
Tip: Seret jendela browser menjadi lebih kecil dari lebar 500px untuk melihat perbedaan antara kedua div!
Catatan: Nilai properti max-width menggantikan width.
Contoh
Elemen ini memiliki tinggi 100 piksel dan lebar maksimal 500 piksel:
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2> Setel lebar maksimal sebuah elemen </h2>
<p> Elemen div ini memiliki tinggi 100px dan lebar maksimal 500px: </p>
<div> </div>
<p> Ubah ukuran jendela browser untuk melihat efeknya. </p>
</body>
</html>
Properti Dimensi CSS
| Properti | Deskripsi |
|---|---|
| height | Menyetel tinggi suatu elemen |
| max-height | Menyetel tinggi maksimum sebuah elemen |
| max-width | Menyetel lebar maksimum sebuah elemen |
| min-height | Menetapkan tinggi minimum sebuah elemen |
| min-width | Menyetel lebar minimum sebuah elemen |
| width | Menyetel lebar suatu elemen |
