HTML Text को Image से अलग करने के लिए एक वर्टिकल लाइन कैसे खीचें

HTML ऊर्ध्वाधर रेखाओं के लिए एक समाधान के रूप में पेश नहीं करता है क्योंकि यह क्षैतिज रेखाओं के लिए करता है - के बराबर एक ऊर्ध्वाधर


टैग मौजूद नहीं है। यदि आप अपना व्यवसाय वेब पेज सेट करना चाहते हैं ताकि पाठ और एक छवि के बीच एक स्वच्छ परिसीमन हो, तो आप एक साधारण सीमा बनाने के लिए CSS का उपयोग कर सकते हैं। सीमा पूरी छवि के चारों ओर जा सकती है, या आप बस एक तरफ सीमा प्रदर्शित कर सकते हैं। लिपटे पाठ बनाने के लिए आप सीएसएस का उपयोग चित्रों को फ्लोट करने के लिए भी कर सकते हैं।

1।

अपनी छवि को अपने पाठ में सेट करें और "शैली" विशेषता टैग जोड़ें। उदाहरण के लिए, आपकी छवि के लिए HTML कोड कुछ इस तरह दिख सकता है:

2।

"शैली" विशेषता के भीतर सीमा को परिभाषित करें। उदाहरण के लिए, यदि आप संपूर्ण छवि पर लागू होने वाली सीमा चाहते हैं, तो CSS इस तरह दिखाई देगी:

यह एक शॉर्टहैंड बॉर्डर सेटिंग है - पहला मान बॉर्डर की चौड़ाई निर्धारित करता है, दूसरा बॉर्डर का प्रकार निर्धारित करता है और तीसरा रंग सेट करता है। सीमाएं ठोस, बिंदीदार, धराशायी या दोहरी हो सकती हैं; या आप एक 3-D बॉर्डर जैसे कि नाली, रिज, इनसेट या आउटसेट निर्दिष्ट कर सकते हैं।

यदि आप सही वर्टिकल लाइन बनाने के लिए बॉर्डर को सिर्फ एक तरफ लगाना चाहते हैं, तो आप "बॉर्डर" के बजाय "बॉर्डर-लेफ्ट" या "बॉर्डर-राइट" का इस्तेमाल करेंगे।

3।

अपनी छवि और पाठ के बीच कुछ स्थान बनाने के लिए पैडिंग जोड़ें। यदि आप चाहते हैं कि बॉर्डर छवि से 5 पिक्सेल दूर हो, तो "पैडिंग: 5 पीएक्स" जोड़ें। आपके स्टाइल टैग के लिए। आप उदाहरण के लिए, "पैडिंग-लेफ्ट: 5 पीएक्स;" का उपयोग करके केवल एक तरफ पैडिंग निर्दिष्ट कर सकते हैं। यदि आप सीमा और पाठ के बीच स्थान बनाना चाहते हैं, तो मार्जिन का उपयोग करें। आपको "src" टैग के लिए अपनी छवि URL निर्दिष्ट करने की भी आवश्यकता होगी। जब आप यह सब एक साथ करते हैं, तो आपका कोड कुछ इस तरह दिख सकता है:

4।

अपने HTML को इस बात की पुष्टि करने के लिए सहेजें और परीक्षण करें कि बॉर्डर प्रदर्शित कर रहा है जैसा कि आप चाहते हैं।

लोकप्रिय पोस्ट