Height

Height blok və ya onu əvəz edən elementlərin (məsələn <img> elementi) hündürlüyünü təyin edir. Bu ölçüyə border'lərin qalınlığı, boşluqlar (padding) daxil deyil.

Quruluşu: height: <dəyər>
Aldığı dəyərlər: uzunluq dəyəri | faiz dəyəri | auto | inherit
Başlanğıc dəyəri: auto
Tətbiq oluna bilən elementlər: Blok elementlər və onu əvəz edən elementlər
İrsilik: Yoxdur
 
CSS-də qəbul edilmiş istənilən uzunluq vahidləri height üçün təyin oluna bilər, məsələn piksel (px), düym (in) və s.
Faiz dəyərindən istifadə zamanı ölçü həmin elementin valideyn (üst) elementinin enindən asılı olaraq hesablanır. Tutaq ki, üst elementin ölçüsü 200 pikseldir. Əgər uşaq elementə width olaraq 50% ölçü verilərsə, həmin elementin eni 100 piksel olacaqdır. Əgər üst element və ya ölçüsü yoxdursa, bu zaman brauzerin pəncərəsinin ölçüsünə görə hesablanır. auto dəyəri elementin tərkibinə əsaslanaraq hündürlüyü təyin edir.
 
Nümunəyə baxaq:
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>height</title>
  <style>
   .layer {
    height: 50px; /* Blokun hündürlüyü */
    width: 150px; /* Blokun eni */
    overflow: scroll; /* Scrollbar (sürüşdürmə) əlavə edirik */
    background: #fc0; /* Arxa fon rəngi */
    padding: 7px; /* Mətn ətrafı boşluqlar */
    border: 1px solid #333; /* Çərçivə parametrləri */
   }
  </style>
 </head> 
 <body> 
  <div class="layer">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  </div> 
 </body>
</html>
 
Brauzerdə nəticə belə görünəcəkdir.
 

Height

 
Göründüyü kimi, hündürlüyü 50px etdik, amma yazılar çoxdur və yerləşmir, bu hal üçün overflow:scroll əlavə edərək, scroll ilə yazının davamını oxuya bilirik.
Nəticəyə bu linkdən də baxa bilərsiniz.
CSS3