CSS in Hindi – Introduction to CSS height Properties

  • CSS height property in Hindi
  • Max-height property in Hindi
  • Min-height property in Hindi

CSS in Hindi – height Property

जिस तरह width property का use किया जाता है | width बढाने के लिए ठीक उसी प्रकार से height property का use height बढाने के लिए किया जाता है |

लेकिन height property का effect vertically होता है | और width property का effect horizontally होता है | लेकिन width and height property दोनों same तरह से work करते है |

आप जब भी height property use करते है तो content के हिसाब से height देनी चाहिए नही तो आपका text border से बाहर show होने लगेगा |

Css मे height property का use html के किसी भी tags पर apply किया जा सकता है for example table,ordered list,unordered list,image,heading tags,paragraph tags आदि पर height property का use किया जा सकता है |

height property मे भी value pixel मे दी जाती है और percentage मे भी दे सकते है | और यहाँ भी height property का value auto दिया जा सकता है |

Syntax of height Property

height : auto | 100px | 20%;

height property मे आप तिन value दे सकते है पहला value pixel है जो mostly use किया जाता है और दूसरा value percentage है जो आपके web page के हिसाब से height adjust करता है और तीसरा value auto होता है जो आपके content के हिसाब से खुद ही adjust कर लेता है | अब निचे दिये गये code देखे |

<html>
<head>
<style type="text/css">
#p1 { height: 30%; }
#p2 { height: 50px; }
#p3 { height: auto; }
</style>
</head>
<body>
<p id="p1">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p2">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p3">Easy Hindi Tutorials is a best blog of computer programming</p>
</body>
</html>

max-height Property

जिस तरह width property मे max-width property होती है ठीक उसी प्रकार से height property मे भी max-height property होता है |

जब max-height property का use किया जाता है | तो define किये गये value से अधिक height नही मिल सकती है | अगर आप html के किसी element की height 500px define कर देते है तो उस element की max-height आपने define कर दिया है | जिसकी value 500px है | अब निचे दिये गये code देखे |

<html>
<head>
<style type="text/css">
#p1 { max-height: 30%; }
#p2 { max-height: 50px; }
#p3 { max-height: 100px; }
</style>
</head>
<body>
<p id="p1">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p2">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p3">Easy Hindi Tutorials is a best blog of computer programming</p>
</body>
</html>

min-height Property

css मे min-height property का use minimum height देने के लिए किया जाता है | जब आप किसी element की height min-height property मे define करते है तो उस element की height define की गयी value से कम नही हो सकती है |

min-height property मे भी value pixel या percentage मे दिया जाता है | अब निचे दिये गये code को देखे और समझे |

<html>
<head>
<style type="text/css">
#p1 { min-height: 30%; }
#p2 { min-height: 50px; }
#p3 { min-height: 400px; }
</style>
</head>
<body>
<p id="p1">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p2">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p3">Easy Hindi Tutorials is a best blog of computer programming</p>
</body>
</html>
CSS Width Properties CSS Border Properties
Previous Next