CSS में height property की help से आप किसी element की height को define कर सकते हैं।

element{
  height : 30px;
}

element with 60px; height

CSS height example

CopyFullscreenClose FullscreenRun
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS height Example</title>
  </head>
  <body>
    <p style="border : 2px solid violet; height : 60px;">element with 60px; height</p>
  </body>
</html>

CSS height values

CSS में height property की values कुछ इस प्रकार हैं।

  • auto : by default value है जिसे browser द्वारा apply किया जाता है।

  • length : इसमें आप px / cm में height define कर सकते हैं , जैसे 15px , 20cm.

  • % : आप percent में भी width define कर सकते हैं , जैसे 20% , 20%.

  • inherit : इस value से किसी element की height इसके parent element से determine की जाती हैं।


element with 150px; width

element with 5cm; width

element with 50%; width

element with auto width

element with initial width

element with inherit

CopyFullscreenClose FullscreenRun
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS height Example</title>
  </head>
  <body>
    <p style="background-color: violet; height : 60px;">element with 60px; height</p>
    <p style="background-color: hotpink; height : 5cm;">element with 5cm; height</p>
    <p style="background-color: lightblue; height : auto;">element with auto height</p>
    <p style="background-color: lightgreen; height : initial;">element with initial height</p>
      <p style="background-color: gold; height : inherit;">element with inherit</p>
  </body>
</html>

CSS other height properties

इसके अलावा CSS हमें min-height और max-height properties भी provide कराता है , किनकी help से किसी element की height को define कर सकते हैं।

CSS min-height

इस property की help से किसी element की minimum height specify की जाती है, फिर उस height से वो element छोटा हो ही नहीं सकता है।

element{
  min-height : 100px;
}
CSS min-height example
CopyFullscreenClose FullscreenRun
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS min-height Example</title>
  </head>
  <body>
    <p style="background-color: violet; min-height : 60px;">element with min-height</p>
  </body>
</html>

CSS max-height

इसकी help से किसी element की maximum height specify की जाती है , फिर उस element के अंदर कितना ही content क्यों न हो element की height define की गयी maximum height से ज्यादा नहीं बढ़ेगी। चाहे element के अंदर का content बाहर ही क्यों न हो जाये।

CSS max-height example
CopyFullscreenClose FullscreenRun
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS max-height Example</title>
  </head>
  <body>
  	<div style="background-color: hotpink; max-height:60px;">
        <p>element with max-height</p>
        <p>element with max-height</p>
        <p>element with max-height</p>
    </div>
  </body>
</html>

I Hope, अब आपको CSS में height के बारे में अच्छे से समझ आ गया होगा।

Related Topics :

Rahul Kumar

Rahul Kumar

Hi ! My name is Rahul Kumar Rajput. I'm a back end web developer and founder of learnhindituts.com. I live in Uttar Pradesh (UP), India and I love to talk about programming as well as writing technical tutorials and tips that can help to others.

Get connected with me. :) LinkedIn Twitter Instagram Facebook

b2eprogrammers