टेक्स्ट-सजावट: अंडरलाइन बनाम सीमा-नीचे

Question

{text-decoration: underline} और {border-bottom: ...} का उपयोग करने में क्या अंतर है?

जो शैली और क्रॉस ब्राउज़र को संगत करने में आसान है?

जब हमें border-bottomtext-decoration: underline से अधिक उपयोग करना चाहिए?

का उपयोग text-decoration: underline के स्थान पर हमेशा अच्छा होगा?

Answer 1

border-bottom तत्व बॉक्स के नीचे एक रेखा डालता है। text-decoration:underline पाठ को रेखांकित करता है। सटीक अंतर एचटीएमएल और टेक्स्ट लेआउट इंजन पर निर्भर करता है, लेकिन सामान्य रूप से यदि आप रेखांकित टेक्स्ट चाहते हैं, तो इसे रेखांकित करें।

Answer 2

bottom-border आपको टेक्स्ट और अंडरलाइन के बीच की दूरी को नियंत्रित करने देता है, इसलिए यह अधिक बहुमुखी है। और (जैसा ऊपर बताया गया है) यह अंडरलाइन के लिए एक अलग रंग की अनुमति देता है (हालांकि मुझे कोई कारण नहीं दिख रहा है कि आप ऐसा क्यों करना चाहते हैं)।

text-decoration अधिक 'सही' है क्योंकि यह पाठ को रेखांकित करने के लिए 'असली' सीएसएस संपत्ति है।

यदि आप सभी लिंक के लिए text-decoration: underline सेट करते हैं तो आपको विशेष लिंक के लिए text-decoration: none सेट करना होगा, जिसकी आपको आवश्यकता नहीं है। लेकिन यदि आप इसके बजाय सीमा-तल का उपयोग करते हैं, तो आप अपने रीसेट सीएसएस में text-decoration: none सेट कर देंगे।

तो सब कुछ में, यदि आप के साथ जटिल लेआउट है तो मैं border-bottom के लिए वोट दूंगा प्रत्येक लिंक लेकिन text-decoration 'पुस्तक से' कोडित एक सरल वेबसाइट के लिए के लिए विभिन्न शैलियों।

Answer 3

रूप इग्नेसियो कहा, border-bottom जबकि text-decoration:underline वास्तव में पाठ रेखांकित करेगा, जिसमें बॉक्स के नीचे लाइन डाल देंगे। यह हो जाता है एक बहु-पंक्ति तारों के लिए महत्वपूर्ण भेद।

I am a single line and will look similar for both methods 
--------------------------------------------------------- 

शायद दोनों शैलियों के लिए समान प्रस्तुत करेगा, लेकिन आपको बहु-पंक्ति तारों के लिए निम्न प्राप्त होगा। स्वरूपण कोड का उपयोग कर के बजाय ठीक से इन उदाहरणों प्रतिपादन, लेकिन आप बिंदु मैं बनाने के लिए कोशिश कर रहा हूँ देख सकते हैं के लिए

I am a string that has been 
split and added a border-bottom 
------------------------------- 

I am a string that has been 
--------------------------- 
split and underlined 
-------------------- 

क्षमा याचना।

Answer 4

यह कहने के लिए खेद है, लेकिन यहां कुछ जवाब भ्रामक हैं। इनलाइन ब्लॉक की प्रकृति की वजह से पाठ की एक पंक्ति को विभाजित करना पूरे ब्लॉक के नीचे सीमा को नहीं रखता है। लिंक्स के नीचे सीमाएं टेक्स्ट-सजावट की तुलना में ब्राउज़र में वास्तव में अधिक सुसंगत हैं: रेखांकित करें।

देखें: Text-Decoration vs. Border-Bottom

Answer 5

इनलाइन प्रदर्शित करने के लिए अपने पाठ की स्थापना (वास्तव में, यह होना चाहिए डिफ़ॉल्ट रूप से उस) सीमा-नीचे एक पाठ-सजावट नियम के रूप में ज्यादा रेंडर करने के लिए कारण होगा।

हालांकि, मुझे लगता है कि आप लिंक पर इस तकनीक का उपयोग करना चाहते हैं करके निम्नलिखित:

/* my super eye catching dual colour link */ 
a { 
    color:black; 
    border-bottom:1px solid red; 
} 

जो सभी अच्छी तरह से और अच्छा है, लेकिन आप पाएंगे कि भी आप एक के अंदर एक img टैग है लिंक, छवि के तहत एक लाल सीमा होगी।

यदि आप मौजूदा चयनकर्ताओं और कोई जावास्क्रिप्ट का उपयोग कर किसी पृष्ठ तत्व (छवि) के अभिभावक को लक्षित करने का कोई तरीका नहीं समझ सकते हैं, तो मैं आपको एक बियर खरीदूंगा लेकिन मुझे नहीं लगता कि आपको बहुत भाग्य मिलेगा।

"टेक्स्ट-सजावट" का उपयोग करके इस समस्या को पूरी तरह से टालता है क्योंकि एक छवि स्पष्ट रूप से टेक्स्ट नहीं है, यह एक लिंक के अंदर एक रेखांकित नहीं करेगा।

यदि आपके पास अपने मार्कअप पर पूर्ण नियंत्रण है, तो मुझे लगता है कि आप प्रत्येक लिंक में कक्षाएं जोड़कर अपना रास्ता बिगड़ सकते हैं, लेकिन यदि आप किसी भी लोकप्रिय सीएमएस सिस्टम के साथ काम कर रहे हैं, तो आप इस विचार से संघर्ष करने जा रहे हैं।

Answer 6

1px छवि

a:hover { 
    background: url("img/bg-link-hover.png") repeat-x scroll 0px 92% transparent; 
    background-color: transparent; 
    background-image: url("img/bg-link-hover.png"); 
    background-repeat: repeat-x; 
    background-attachment: scroll; 
    background-position: 0px 92%; 
    background-clip: border-box; 
    background-origin: padding-box; 
    background-size: auto auto; 
} 

Answer 7

के साथ इस सीमा का प्रयास करें, जहां एक अन्य की तुलना में अधिक उपयुक्त है जबकि वहाँ हमेशा मामलों होने जा रहे हैं, border-bottomtext-decoration पर अधिक सटीक नियंत्रण प्रदान करता है और इसलिए शायद पसंदीदा तरीका है। यहां एक त्वरित (संभावना व्यापक नहीं) गुण है कि border-bottom सक्षम नियंत्रित कर सकते हैं/की सूची दी गई है कि text-decoration नहीं कर सकते हैं:

1. पाठ और के बीच खाली स्थान "को रेखांकित"
2. "रेखांकन" शैली (बिंदीदार, धराशायी, ठोस, ढाल, छवि)
3. मोटाई
4. सीएसएस बदलाव/एनिमेशन
5. पाठ और बीच रंग का पृथक्करण "को रेखांकित"

कई मामलों में, इनमें से अधिकतर क्षमताओं की आवश्यकता नहीं होगी - लेकिन उन्हें उपलब्ध कराने के लिए अच्छा है! मैंने टेक्स्ट और अंडरलाइन के बीच पैडिंग के कुछ पिक्सल डालने की क्षमता के लिए मुख्य रूप से border-bottom का उपयोग करने के लिए स्विच किया है; मैंने पाया है कि अगला सबसे आम उपयोग टेक्स्ट रंग से अंडरलाइन रंग तलाक दे रहा है।

सीएसएस चर अब हर प्रमुख ब्राउज़र में शिपिंग के साथ

, एक "रीसेट" स्टाइलशीट कुछ इस तरह दिख सकता है:

:root { 
    --link-color: blue; 
    --hover-color: purple; 
    --underline-color: var(--link-color); 
} 

a { 
    color: var(--link-color); 
    text-decoration: none; 
    border-bottom: 1px solid var(--underline-color); 
} 

a:hover { 
    color: var(--hover-color); 
    border-bottom-color: var(--hover-color); 
} 

इस तरह, लिंक एक "डिफ़ॉल्ट" के आधार पर अपेक्षा के अनुरूप प्रदर्शन करेंगे, फिर भी अभी भी अनुमति देने के आवश्यकतानुसार अनुकूलन के लिए।