CSS के साथ <hr> एलिमेंट की मोटाई समायोजित करना - एक त्वरित गाइड

<hr> टैग का उपयोग वेब पेज पर क्षैतिज रेखाएं खींचने के लिए किया जाता है। यह टैग विभिन्न वर्गों के बीच एक क्षैतिज रेखा खींचकर सामग्री को अलग करने के लिए सबसे उपयोगी HTML टैग्स में से एक है। इस गाइड में, हम सीखेंगे कि CSS का उपयोग करके विभिन्न तरीकों से <hr> टैग की मोटाई कैसे बदलें।

सिंटैक्स

hr { height: value; border: value; }

HTML में hr टैग

<hr> टैग का अर्थ हॉरिजॉन्टल रूल है। यह एक सेल्फ-क्लोजिंग टैग है जो एक वेब पेज के अनुभागों के बीच एक क्षैतिज रेखा का उपयोग करके एक दृश्य विभाजक बनाता है।

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
hr { margin: 20px 0; }
</style>
</head>
<body>
<p>अनुभाग 1</p>
<hr>
<p>अनुभाग 2</p>
</body>
</html>

उचित स्पेसिंग के साथ एक पतली क्षैतिज रेखा द्वारा अलग किए गए दो टेक्स्ट अनुभाग।

विधि 1: Height प्रॉपर्टी का उपयोग करना

इस विधि में, हम <hr> टैग की मोटाई बदलने के लिए सीधे CSS के height प्रॉपर्टी का उपयोग करते हैं। यह विधि नियंत्रित करती है कि क्षैतिज रेखा कितनी मोटी दिखाई देती है।

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
hr {
  height: 5px;
  background-color: black;
  border: none;
  margin: 20px 0;
}
</style>
</head>
<body>
<p>रेखा के ऊपर</p>
<hr>
<p>रेखा के नीचे</p>
</body>
</html>

5px मोटी काली क्षैतिज रेखा द्वारा अलग किए गए दो टेक्स्ट अनुभाग।

विधि 2: Border प्रॉपर्टी का उपयोग करना

इस विधि में, हम CSS के border-top या border-bottom प्रॉपर्टी का उपयोग करके एक मोटी क्षैतिज रेखा बनाते हैं। यह विधि अधिक लचीली है और विभिन्न डिज़ाइनों जैसे डैश्ड या डॉटेड लाइन्स का समर्थन करती है।

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
hr {
  border: none;
  border-top: 6px solid blue;
  margin: 20px 0;
}
</style>
</head>
<body>
<p>रेखा के ऊपर</p>
<hr>
<p>रेखा के नीचे</p>
</body>
</html>

6px मोटी नीली क्षैतिज रेखा द्वारा अलग किए गए दो टेक्स्ट अनुभाग।

तुलना

निष्कर्ष

आप CSS का उपयोग करके <hr> टैग की मोटाई आसानी से बदल सकते हैं। height विधि ठोस रेखाओं के लिए सीधी है, जबकि border विधि अधिक स्टाइलिंग लचीलापन प्रदान करती है। अपनी डिज़ाइन आवश्यकताओं के आधार पर चुनें।