If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
CSS में height property की help से आप किसी element की height को define कर सकते हैं।
element{
height : 30px;
}element with 60px; height
<!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 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
<!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 हमें min-height और max-height properties भी provide कराता है , किनकी help से किसी element की height को define कर सकते हैं।
इस property की help से किसी element की minimum height specify की जाती है, फिर उस height से वो element छोटा हो ही नहीं सकता है।
element{
min-height : 100px;
}
<!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>इसकी help से किसी element की maximum height specify की जाती है , फिर उस element के अंदर कितना ही content क्यों न हो element की height define की गयी maximum height से ज्यादा नहीं बढ़ेगी। चाहे element के अंदर का content बाहर ही क्यों न हो जाये।
<!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>
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
