CSS Height Property
CSS Dimension की दूसरी Property CSS height Property होती हैं। इसकी पहली Property width होती हैं। किसी Element द्वारा Browser Window में Vertically जितना Space लिया जाता हैं, वह उस Element की Height यानि ऊंचाई कहलाती हैं।
जब किसी Element की Height Set की जाती हैं तो वह केवल Element के Content Area की Height होती हैं. इसमें Padding, Border, और Margin शामिल नहीं रहता हैं। By Default किसी Element की Height Auto Set रहती हैं जो Browser द्वारा निर्धारित की जाती हैं। क्योंकि अधिकतर Element के लिए Height को Set भी नही किया जाता हैं।
Different Types of CSS height Property
HTML Element की Height Set करने के लिए कई Different Properties Provide करवाई जाती हैं। जिनके द्वारा Element की Height को अपने हिसाब से Control कर सकते हैं।
Height Property
इस Dimension Property द्वारा Elements की Height Set की जाती हैं। जिसकी Value आप px, cm, pt या % में Define कर सकते हैं।
<!DOCTYPE html>
<html>
<head>
<title>CSS Height Examples</title><style type=”text/css”>
p {
height: 150px; border: 3px solid red;
}
<body>
<p>This is a Paragraph. This paragraph text has written in English. This paragraph height is 300px and has a red border with 3px.</p>
</body>
</style>
</html>
<html>
<head>
<title>CSS Height Examples</title><style type=”text/css”>
p {
height: 150px; border: 3px solid red;
}
<body>
<p>This is a Paragraph. This paragraph text has written in English. This paragraph height is 300px and has a red border with 3px.</p>
</body>
</style>
</html>
OUTPUT-
Max Height Property
Max Height Property द्वारा Elements की अधिकतम ऊँचाई यानि Maximum Height को निर्धारित किया जाता हैं। जब किसी Element की Maximum Height Declare कर देते हैं तो वह Element उसी Height में Show होता हैं।
<html>
<head>
<title>CSS Maximum Height Examples</title><style type=”text/css”>
p {
max-height: 30px; border: 3px solid red;
}
</style>
<body>
<p>This is a Paragraph. This paragraph text has written in English. This paragraph’s maximum height is 30px and has a red border with 3px. This is a Paragraph. This paragraph text has written in English. This is a Paragraph. This paragraph text has written in English.</p>
</body>
</html>
OUTPUT-
Min Property
इस Property द्वारा Elements की कस से कम ऊँचाई यानि Minimum Height को Set किया जाता हैं। यानि अब यह Element इससे कम Height में Show नही होगा।
<!DOCTYPE html>
<html>
<head>
<title>CSS Minimum Height Examples</title><style type=”text/css”>
p {
min-height: 100px; border: 3px solid red;
}
<body>
<p>This is a Paragraph. This paragraph text has written in English. This paragraph’s minimum height is 100px and has a red border with 3px.</p>
</body>
</style>
</html>
<html>
<head>
<title>CSS Minimum Height Examples</title><style type=”text/css”>
p {
min-height: 100px; border: 3px solid red;
}
<body>
<p>This is a Paragraph. This paragraph text has written in English. This paragraph’s minimum height is 100px and has a red border with 3px.</p>
</body>
</style>
</html>
OUTPUT-
CSS Width Property का परिचय
कोई Element Horizontally जितनी जगह Browser Window में लेता हैं। वह उस Element की Width कहलाती हैं। Width Property द्वारा केवल Element Content Area की Width Set होती हैं। इसमें Padding, Border और Margin शामिल नहीं रहता हैं। By Default प्रत्येक Element के लिए Width Set रहती हैं। इस Situation में Browser Elements के लिए Width Calculate करता हैं। यदि Auto पर निर्भर नही रहना चाहते हैं तो किसी भी Element की Width px, cm, pt और % में Set कर सकते हैं।
Different Types of CSS Width Property
Element की Width Set करने के लिए CSS द्वारा कई Width Properties उपलब्ध करवाई जाती हैं। इन Properties के द्वारा Element की Width को Control कर सकते हैं।
Width Property
Width Property का प्रयोग Element की Width Set करने के लिए किया जाता हैं। मतलब किसी Particular Element को Webpage पर Horizontally कितना Space देना चाहते हैं।
<html>
<head>
<title>CSS Width Examples</title><style type=”text/css”>
p {
width: 300px; border: 3px solid red;
}</style>
<body>
<p>This is a Paragraph. This paragraph text has written in English. This paragraph is 300px wide and has a red border with 3px.</p>
</body>
</html>
OUTPUT-
Max Width Property
इस Property का प्रयोग किसी Element की अधिकतम यानि Maximum Width Set करने के लिए किया जाता हैं। जब किसी Element की Maximum Width Set कर देते हैं तो उस Element की Width इससे ज्यादा नहीं हो सकती हैं। Max Width Property के द्वारा Element को Responsive बनाने के लिए किया जाता हैं। ताकि Element उपलब्ध Viewport (Display Size) के अनुसार अपना आकार बदल सके।
<html>
<head>
<title>CSS Maximum Width Examples</title><style type=”text/css”>
p {
max-width: 300px; border: 3px solid red;
}</style>
<body>
<p>This is a Paragraph. This paragraph text has written in English. This paragraph is 300px wide and has a red border with 3px.</p>
</body>
</html>
OUTPUT-
Min Property
इस Dimension Property द्वारा किसी Element की कम से कम यानि Minimum Width Set की जाती हैं। मतलब वह Element Set की गई कम से कम Width से कम Width में नही दिखाई देगा।
<!DOCTYPE html>
<html>
<head>
<title>CSS Minimum Width Examples</title><style type=”text/css”>
p {
min-width: 400px; border: 3px solid red;
}</style>
<body>
<p>This is a Paragraph. This paragraph text has written in English. This paragraph’s minimum width is 400px and has a red border with 3px.</p>
</body>
</html>
OUTPUT-
For Any Doubt Clear on Telegram Discussion Group
No comments:
Post a Comment