CSS fungsi Property Height serta Valuenya

height(ID tinggi) adalah salah satu property dalam css, sedangkan fungsinya ialah mengatur tinggi bidang_tag yang kita buat. valuenya antara lain auto, length(px, em, in) %

Diberkatilah orang yang terlalu sibuk untuk kuatir pada siang hari, dan terlalu lelah untuk kuatir di malam harinya. Phil Marquart

height(ID tinggi) adalah salah satu property dalam css, sedangkan fungsinya ialah mengatur tinggi bidang_tag yang kita buat. valuenya antara lain auto, length(px, em, in) %

Last Modif at July 10th, 2011

height(ID tinggi) adalah salah satu property dalam css, sedangkan fungsinya ialah mengatur tinggi bidang_tag yang kita buat. yups, saya pikir sobat sudah tahu!

value height

value height antara lain

  • auto
  • length(px, in, em)
  • (percent)%
  • inherit

height:auto;

value auto ini adalah nilai default dari stylenya, anggap jika sobat memulis sebuah style tanpa property height “sudah diberi nilai auto”

height:length(px, in, em)

value length ini bisa kita tentukan tingginya, pilihanya beragam seperti px, in dan em. saya pribadi lebih suka memakai length(dalam px)

height:percent(%)

saya jarang menggunakan % untuk value height, rekomendasi length(px, in, em)

height:inherit

saya ngga pernah menggunakan!

contoh property height dalam inline style

contoh 1

code

<div style="margin:5px;background-color:red;height:200px;">
height:200px; height:200px; height:200px; height:200px; height:200px; height:200px; height:200px; height:200px; height:200px;
</div>

tampilan

height:200px; height:200px; height:200px; height:200px; height:200px; height:200px; height:200px; height:200px; height:200px;

contoh 2

code

<div style="margin:5px;background-color:red;height:3in;">
height:3in; height:3in; height:3in; height:3in; height:3in; height:3in; height:3in; height:3in; height:3in; height:3in;
</div>

tampilan

height:3in; height:3in; height:3in; height:3in; height:3in; height:3in; height:3in; height:3in; height:3in; height:3in;

contoh 3

code

<div style="margin:5px;background-color:red;height:20em;">
height:20em; height:20em; height:20em; height:20em; height:20em; height:20em; height:20em; height:20em; height:20em;
</div>

tampilan

height:20em; height:20em; height:20em; height:20em; height:20em; height:20em; height:20em; height:20em; height:20em;

contoh height dalam internal style


perhatikan markup code di bawah

<html>
<head>
<title>css height</title>
<meta content="indam url:http://www.indaam.net" name="author"/>
<style type="text/css">
#bentuk-pertama{float:left;
background-color:red;
height:100px;
width:250px;
margin:5px;
}
#bentuk-kedua{
float:left;
background-color:red;
height:200px;
width:250px;
margin:5px;
}
#bentuk-ketiga{
float:left;
background-color:red;
height:300px;
width:250px;
margin:5px;
}
#bentuk-keempat{float:left;
background-color:red;
height:6in;
width:250px;
margin:5px;
}
#bentuk-kelima{
float:left;
background-color:red;
height:50em;
width:250px;
margin:5px;
}
#bentuk-keenam{
float:left;
background-color:red;
height:20%;
width:250px;
margin:5px;
}
</style>
</head>
<body>
<div id="bentuk-pertama">bentuk-pertama</div>
<div id="bentuk-kedua">bentuk-kedua</div>
<div id="bentuk-ketiga">bentuk-ketiga</div>
<div style="clear:both;/**/"></div>
<div id="bentuk-keempat">bentuk-peempat</div>
<div id="bentuk-kelima">bentuk-kelima</div>
<div id="bentuk-keenam">bentuk-kenam</div>
<div style="clear:both;/**/"></div>
<p>salam <a href="http://www.indaam.net" title="indam site" target="_blank">indaam site</a></p>
</body>
</html>

untuk melihat hasilnya

  • copy markup style diatas
  • paste ke notepad
  • save as (pilih all types) dengan nama contohcssheight.htm
  • jalankan(double click), atau
  • open with (firefox, ie, opera, safari, chrome)
  • silakan edit valuenya
  • letak valuenya antara : (titik dua) dan ;(titik koma)
  • selamat belajar

References

http://www.w3.org/Style/CSS

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-