Kita bisa menentukan dimensi ukuran panjang dan lebar terhadap suatu elemen html dengan menggunakan CSS. Ada beberapa properti yang disediakan, diantaranya width untuk mengatur lebar dan dan height untuk mengatur tinggi. Selain itu ada properti untuk mengeset nilai minimum dan maksimum untuk dimensi lebar dan tinggi.
Berikut ini beberapa properti CSS untuk menentukan dimensi ukuran dan penjelasannya :
1. width
Adalah properti CSS yang digunakan untuk menentukan lebar sebuah elemen. Nilai width ini merupakan lebar elemen tidak termasuk padding, border dan margin.
Nilai dari properti width bisa diset beberapa cara, yaitu :
- auto, artinya browser memperkirakan sendiri nilai width.
- panjang, artinya nilai width ditentukan dengan satuan panjang seperti px, pt, cm dan lain-lain. Nilai default adalah 0px.
- persen (%), artinya nilai width diambil dari persentase lebar elemen.
- inherit/pewarisan, artinya nilai width diambil dari turunan nilai elemen induk.
- initial, artinya nilai width diset default value yang telah diset sebelumnya.
Contoh penggunaan CSS width :
p {
width: 150px;
}
Kita bisa berlatih CSS width disini >>
2. min-width
Adalah properti CSS yang digunakan untuk menentukan lebar minimum sebuah elemen.
Nilai dari properti min-width bisa diset beberapa cara, yaitu :
- panjang, artinya nilai min-width ditentukan dengan satuan panjang seperti px, pt, cm dan lain-lain. Nilai default adalah 0px.
- persen (%), artinya nilai min-width diambil dari persentase lebar elemen.
- inherit/pewarisan, artinya nilai min-width diambil dari turunan nilai elemen induk.
- initial, artinya nilai min-width diset default value yang telah diset sebelumnya.
Contoh penggunaan CSS min-width :
p {
min-width: 100px;
}
Kita bisa berlatih CSS min-width disini >>
3. max-width
Adalah properti CSS yang digunakan untuk menentukan lebar maksimum sebuah elemen.
Nilai dari properti max-width bisa diset beberapa cara, yaitu :
- none/kosong, artinya nilai maksimum tidak diset. Ini adalah nilai default jika properti max-width tidak diset
- panjang, artinya nilai max-width ditentukan dengan satuan panjang seperti px, pt, cm dan lain-lain. Nilai default adalah 0px.
- persen (%), artinya nilai max-width diambil dari persentase lebar elemen.
- inherit/pewarisan, artinya nilai max-width diambil dari turunan nilai elemen induk.
- initial, artinya nilai max-width diset default value yang telah diset sebelumnya.
Contoh penggunaan CSS min-width :
p {
min-width: 200px;
}
Kita bisa berlatih CSS max-width disini >>
4. height
Adalah properti CSS yang digunakan untuk menentukan tinggi sebuah elemen. Nilai height ini merupakan tinggi elemen tidak termasuk padding, border dan margin.
Nilai dari properti height bisa diset beberapa cara, yaitu :
- auto, artinya browser memperkirakan sendiri nilai height.
- panjang, artinya nilai height ditentukan dengan satuan panjang seperti px, pt, cm dan lain-lain. Nilai default adalah 0px.
- persen (%), artinya nilai height diambil dari persentase tinggi elemen.
- inherit/pewarisan, artinya nilai height diambil dari turunan nilai elemen induk.
- initial, artinya nilai height diset default value yang telah diset sebelumnya.
Contoh penggunaan CSS height :
p {
height: 150px;
}
Kita bisa berlatih CSS height disini >>
5. min-height
Adalah properti CSS yang digunakan untuk menentukan tinggi minimum sebuah elemen.
Nilai dari properti min-height bisa diset beberapa cara, yaitu :
- panjang, artinya nilai min-height ditentukan dengan satuan panjang seperti px, pt, cm dan lain-lain. Nilai default adalah 0px.
- persen (%), artinya nilai min-height diambil dari persentase tinggi elemen.
- inherit/pewarisan, artinya nilai min-height diambil dari turunan nilai elemen induk.
- initial, artinya nilai min-height diset default value yang telah diset sebelumnya.
Contoh penggunaan CSS min-height :
p {
min-height: 100px;
}
Kita bisa berlatih CSS min-height disini >>
6. max-height
Adalah properti CSS yang digunakan untuk menentukan tinggi maksimum sebuah elemen.
Nilai dari properti max-height bisa diset beberapa cara, yaitu :
- none/kosong, artinya nilai maksimum tidak diset. Ini adalah nilai default jika properti max-height tidak diset
- panjang, artinya nilai max-height ditentukan dengan satuan panjang seperti px, pt, cm dan lain-lain. Nilai default adalah 0px.
- persen (%), artinya nilai max-height diambil dari persentase tinggi elemen.
- inherit/pewarisan, artinya nilai max-height diambil dari turunan nilai elemen induk.
- initial, artinya nilai max-height diset default value yang telah diset sebelumnya.
Contoh penggunaan CSS min-height :
p {
max-height: 200px;
}
Kita bisa berlatih CSS max-height disini >>
Lihat indeks artikel Tutorial CSS Dasar >>
Referensi :
