यह मैनुअल आपको दो कड़ियों के बीच जगह बनाने की प्रक्रिया सिखाएगा।
आएँ शुरू करें!
HTML और CSS में दो लिंक के बीच स्पेस कैसे दें?
दो लिंक्स के बीच स्पेस देने के लिए सबसे पहले HTML फाइल में जरूरी लिंक्स को ऐड करें।
चरण 1: HTML में लिंक जोड़ें
HTML में, हम
एचटीएमएल
< डिव >< एक href = 'https://linuxhint.com/create-html-file/' > एचटीएमएल फाइल कैसे बनाएं? < / एक >
< एक href = 'https://linuxhint.com/edit-html-file/' > HTML फ़ाइल को कैसे संपादित करें? < / एक >
< / डिव >
निम्नलिखित छवि से पता चलता है कि लिंक सफलतापूर्वक जोड़े गए हैं:
चरण 2: डिव और लिंक को स्टाइल करें
इस चरण में, 'का उपयोग करके div और लिंक को स्टाइल करें' डिव 'सीएसएस में। हम पैडिंग को “से समायोजित करेंगे” 40px 'और लिंक के फ़ॉन्ट आकार को' के रूप में सेट करें बड़ा ”, div की ऊंचाई “के रूप में सेट की गई है 150पीएक्स 'और पृष्ठभूमि संपत्ति का उपयोग करें और div के रंग को' के रूप में सेट करें काला ' उसके बाद, सीमा की चौड़ाई को “के रूप में समायोजित करें” 5पीएक्स ',' के रूप में शैली धराशायी 'और रंग' के रूप में आरजीबी(251, 255, 0) '
सीएसएस
डिव {गद्दी : 40px ;
फ़ॉन्ट आकार : बड़ा ;
कद : 150पीएक्स ;
पार्श्वभूमि : काला ;
सीमा : 5पीएक्स धराशायी आरजीबी ( 251 , 255 , 0 ) ;
}
उपरोक्त कोड का उपयोग करके, निम्न आउटपुट प्राप्त किया जाता है। जैसा कि आप देख सकते हैं, डिव और लिंक दोनों को स्टाइल किया गया है:
चरण 3: क्षैतिज रूप से दो लिंक के बीच स्थान दें
हम HTML और CSS का उपयोग करके क्षैतिज रूप से दो लिंक के बीच जगह दे सकते हैं। यहां हम दोनों तरीकों को एक-एक करके समझाएंगे।
विधि 1: HTML का उपयोग करना
किसी भी बाहरी सीएसएस को लिखे बिना लिंक के बीच जगह देने के लिए, आप 'का उपयोग कर सकते हैं' HTML में जहाँ आप स्पेस बनाना चाहते हैं। ' 'नॉन-ब्रेकिंग स्पेस के लिए खड़ा है। HTML फ़ाइल में, एक जोड़ने का अर्थ है एक स्थान। यदि आप अधिक स्थान देना चाहते हैं, तो आवश्यक संख्या में रिक्त स्थान के अनुसार मैन्युअल रूप से जोड़ना बेहतर नहीं है।
आइए बताई गई अवधारणा को समझने के लिए उदाहरण की ओर बढ़ते हैं!
उदाहरण
यहाँ, हम चार बार लिखेंगे ' 'पहले लिंक के बाद इस तरह से स्पेस बनाने के लिए कि चार स्पेस के बाद दूसरा लिंक दिखाई दे।
एचटीएमएल
< डिव >< एक href = 'https://linuxhint.com/create-html-file/' > एचटीएमएल फाइल कैसे बनाएं? < / एक >
HTML फ़ाइल को कैसे संपादित करें?
जैसा कि आप देख सकते हैं, पहली कड़ी के दाईं ओर जगह बनाई गई है:
विधि 2: CSS का उपयोग करना
सीएसएस में, हम “का उपयोग करेंगे” मार्जिन-सही 'दो लिंक के बीच जगह देने के लिए संपत्ति। ' मार्जिन-सही 'गुण का उपयोग तत्व के दाईं ओर से स्थान जोड़ने के लिए किया जाता है। आप इसके लिए नकारात्मक मान भी निर्धारित कर सकते हैं।
वाक्य - विन्यास
मार्जिन-राइट प्रॉपर्टी का सिंटैक्स नीचे दिया गया है:
मार्जिन-सही : मूल्यकी जगह ' मूल्य ”, तत्व के दाईं ओर से मार्जिन सेट करें। आइए उदाहरण जारी रखें।
उदाहरण
यहाँ, हम उपयोग करेंगे ' एक “उस लिंक तक पहुँचने के लिए जिसे हमने HTML में बनाया है। इसके बाद, मार्जिन-राइट प्रॉपर्टी का मान 'के रूप में सेट करें' 50px ':
एक {मार्जिन-सही : 50px ;
}
पहली कड़ी के दायीं ओर से स्पेस बनाया जाता है, जिसे नीचे देखा जा सकता है:
चरण 4: दो कड़ियों के बीच लंबवत स्थान दें
दो लिंक्स के बीच वर्टिकल स्पेस देने के लिए पहले लिंक्स को वर्टिकल फॉर्म में अलाइन करें। यह 'का उपयोग करके किया जाएगा' खंड मैथा 'मूल्य' दिखाना 'संपत्ति और फिर' का उपयोग करना ऊंची लाईन 'दो लिंक लाइनों के बीच जगह देने के लिए संपत्ति।
उदाहरण:
यहां, हम डिस्प्ले प्रॉपर्टी का मान 'के रूप में सेट करेंगे' खंड मैथा 'लिंक को लंबवत रूप से संरेखित करने के लिए। फिर, लाइन-ऊंचाई संपत्ति के मूल्य को 'के रूप में सेट करके दो लिंक के बीच की जगह दें' 80px ':
एक {दिखाना : खंड मैथा ;
ऊंची लाईन : 80px ;
}
जैसा कि आप देख सकते हैं, लाइन-ऊंचाई संपत्ति का उपयोग करके स्थान बनाया गया है:
इतना ही! हमने HTML और CSS में दो लिंक के बीच स्पेस देने की विधि के बारे में बताया है।
निष्कर्ष
' ',' ' मार्जिन-सही ', तथा ' ऊंची लाईन CSS के गुण दो लिंक के बीच क्षैतिज और लंबवत स्थान देने के लिए उपयोग किए जाते हैं। इसका उपयोग करके, आप लिंक के दाएं और बाएं किनारे से स्थान को समायोजित कर सकते हैं। इस लेख में, हमने दो अलग-अलग तरीकों का उपयोग करके दो लिंक के बीच जगह देने की प्रक्रिया को समझाया है और संबंधित उदाहरण प्रदान किए हैं।