CSS Icons

CSS height in Hindi

by

HTML के किसी भी element को height देने के लिए height property का use किया जाता है।

Syntax 

element{
               height : 20px;
             }

Example 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS height Example by Technalay </title>
  </head>
  <body>
    <p style="border:2px solid red; height:50px;">CSS height Example by Technalay</p>
  </body>
</html>

CSS height Example by Technalay

CSS height values

CSS में height property अकेले काम नहीं करता इसके लिए कुछ value assign करना पड़ता है। जो इस प्रकार है :

  • auto
  • length
  • %
  • inherit 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS height Example by Technalay </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 height Example

element with 60px; height

element with 5cm; height

element with auto height

element with initial height

element with inherit

CSS min-height and max-height property

इसके मदद से भी किसी element के height को define किया जाता है।

आइये इसे एक एक करके समझने का प्रयास करते है :

CSS min-height

इस property के मदद से किसी भी element का minimum height define किया जाता है। इसको एक बार define करने के बाद उस element का height कम नहीं हो सकता है। 

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

CSS max-height

इस property के मदद से किसी भी element का minimum height define किया जाता है। इसको एक बार define करने के बाद उस element के height को बढ़ाया नहीं जा सकता है।

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

related querry 🚀

Leave a comment