रूपरेखा और सीमा के बीच अंतर

Question

क्या सीएसएस में 'बॉर्डर' और 'आउटलाइन' प्रॉपर्टीज के बीच कोई अंतर है? यदि कोई अंतर नहीं है, तो एक ही चीज़ के लिए दो गुण क्यों हैं?

Answer 1

प्रेषक: http://webdesign.about.com/od/advancedcss/a/outline_style.htm

CSS की रूपरेखा संपत्ति एक भ्रामक संपत्ति है। जब आप पहली बार इसके बारे में सीखते हैं, तो यह समझना मुश्किल है कि यह कैसे दूर से संपत्ति से अलग है। W3C इसे निम्नलिखित अंतरों के रूप में बताता है:

1.Outlines स्थान नहीं लेते हैं।

2.Outlines गैर-आयताकार हो सकता है।

Comments

लिंक ने इसे समझाया। धन्यवाद :)

— क्षितिज सक्सेना -केजे-

@ मनु को लगता है कि रूपरेखा तत्व के अंदर खींची गई है , जबकि सीमाएं इसके बाहर दिखाई देती हैं।

— माहन

Answer 2

कुछ अन्य उत्तरों के अलावा ... यहाँ कुछ और अंतर हैं जिनके बारे में मैं सोच सकता हूँ:

1) गोल कोनों

borderborder-radiusसंपत्ति के साथ गोल कोनों का समर्थन करता है । outlineऐसा नहीं करता।

div {
  width: 150px;
  height: 150px;
  margin: 20px;
  display: inline-block;
  position: relative;
}

.border {
  border-radius: 75px;
  border: 2px solid green;
}

.outline {
  outline: 2px solid red;
  border-radius: 75px;
  -moz-outline-radius: 75px;
  outline-radius: 75px;
}

.border:after {
content: "border supports rounded corners";
position: absolute;
bottom: 0;
transform: translateY(100%);

}
.outline:after {
content: "outline doesn't support rounded corners";
position: absolute;
bottom: 0;
transform: translateY(100%);
}

<div class="border"></div>

<div class="outline"></div>

बेला

(एनबी: हालांकि फ़ायरफ़ॉक्स में वह -moz-outline-radiusसंपत्ति होती है जो आउटलाइन पर गोल कोनों की अनुमति देती है ... यह संपत्ति यह किसी भी सीएसएस मानक में परिभाषित नहीं है, और अन्य ब्राउज़रों ( स्रोत ) द्वारा समर्थित नहीं है

2) स्टाइलिंग केवल एक तरफ

सीमा में प्रत्येक पक्ष के साथ स्टाइल करने के गुण हैं border-top:, border-left:आदि।

रूपरेखा ऐसा नहीं कर सकती। कोई रूपरेखा-शीर्ष नहीं है: आदि यह सब या कुछ भी नहीं है। ( इस SO पोस्ट को देखें )

3) ऑफसेट

आउटलाइन प्रॉपर्टी की रूपरेखा-ऑफसेट के साथ ऑफसेट का समर्थन करता है । सीमा नहीं है

.outline {
  margin: 100px;
  width: 150px;
  height: 150px;
  outline-offset: 20px;
  outline: 2px solid red;
  border: 2px solid green;
  background: pink;
}

<div class="outline"></div>

बेला

नोट: सभी प्रमुख ब्राउज़र outline-offsetइंटरनेट एक्सप्लोरर को छोड़कर समर्थन करते हैं

Comments

हाँ, मैं देख रहा हूँ कि आप क्या कह रहे हैं, मैंने अपने बटन की सीमा त्रिज्या को बदलने की कोशिश की, लेकिन अब फोकस पर मेरी रूपरेखा बटन के चारों ओर अच्छी तरह से नहीं लिपटी है।

— राडटेक

@Danield, जबकि तकनीकी रूप से आपके द्वारा कहा गया सही है, प्रश्न की भावना अलग थी। जब हमारे पास पहले से ही सीमा है तो रूपरेखा क्यों। और जवाब आउटलाइन बॉक्स मॉडल के बाहर है।

— एफटी

@ user247077 - मैं असहमत हूं। ओपी को दोनों की रूपरेखा और सीमा एक जैसी लगती है। इसलिए वह उन दोनों के बीच अधिक से अधिक अंतर जानना चाहता है। कुछ अन्य अंतर पहले से ही अन्य उत्तरों में पोस्ट किए गए थे, इसलिए मैंने अन्य को जोड़ने का फैसला किया जो अभी तक सूचीबद्ध नहीं थे।

— डेनियल सेप

क्या इसका मतलब यह है कि outlinesसीमाओं की तुलना में तेजी से प्रस्तुत करना है?

— उत्कर्ष सिन्हा

Answer 3

अन्य उत्तरों के लिए, आमतौर पर डिबगिंग के लिए रूपरेखा का उपयोग किया जाता है। ओपेरा में कुछ अच्छे उपयोगकर्ता सीएसएस शैली हैं जो आपको यह दिखाने के लिए रूपरेखा संपत्ति का उपयोग करते हैं जहां सभी तत्व एक दस्तावेज़ में हैं।

यदि आप यह पता लगाने की कोशिश कर रहे हैं कि कोई ऐसा तत्व क्यों नहीं दिखाई दे रहा है जहाँ आपको उम्मीद थी या आपके द्वारा अपेक्षित आकार में, कुछ रूपरेखाएँ जोड़ें और देखें कि तत्व कहाँ हैं।

जैसा कि पहले ही उल्लेख किया गया है, रूपरेखा स्थान नहीं लेती है। जब आप एक सीमा जोड़ते हैं, तो दस्तावेज़ में तत्व की कुल चौड़ाई / ऊँचाई बढ़ जाती है, लेकिन यह रूपरेखा के साथ नहीं होता है। इसके अलावा आप सीमाओं जैसे विशिष्ट पक्षों पर रूपरेखा निर्धारित नहीं कर सकते हैं; यह सब या कुछ भी नहीं है।

Answer 4

tldr;

W3C इसे निम्नलिखित अंतरों के रूप में बताता है:

• रूपरेखा स्थान नहीं लेती है।
• रूपरेखा गैर-आयताकार हो सकती है।

स्रोत

पहुंच के लिए रूपरेखा का उपयोग किया जाना चाहिए

यह भी ध्यान दिया जाना चाहिए कि रूपरेखा का प्राथमिक उद्देश्य पहुंच है। इसकी रूपरेखा तैयार करना: किसी को भी इससे बचना नहीं चाहिए।

यदि आप इसे हटा दें तो शायद यह बेहतर स्टाइल प्रदान करने के लिए एक बेहतर विचार है:

मैंने आउटलाइन का उपयोग करके फ़ोकस इंडिकेटर को हटाने के तरीके पर कुछ सुझाव दिए हैं: कोई नहीं या रूपरेखा: 0। कृपया ऐसा न करें, जब तक कि आप उस रूपरेखा को किसी और चीज़ से बदल न दें, जिससे यह देखना आसान हो जाता है कि किस तत्व में कीबोर्ड फ़ोकस है। कीबोर्ड फ़ोकस के दृश्य संकेतक को हटाने से ऐसे लोग मिलेंगे जो कीबोर्ड नेविगेशन पर भरोसा करते हैं और अपनी साइट का उपयोग करते हुए वास्तव में कठिन समय का उपयोग करते हैं।

स्रोत: "लिंक और फॉर्म नियंत्रण से रूपरेखा को दूर न करें", 365 बेरी स्ट्रीट

---

और अधिक संसाधनों

• http://outlinenone.com/

Answer 5

रूपरेखा का व्यावहारिक उपयोग पारदर्शिता से संबंधित है। यदि आपके पास पृष्ठभूमि वाला कोई मूल तत्व है, लेकिन चाहते हैं कि बाल तत्व की सीमा पारदर्शी हो, ताकि माता-पिता की पृष्ठभूमि के माध्यम से दिखाई दे, तो आपको "सीमा" के बजाय "रूपरेखा" का उपयोग करना होगा। जबकि एक सीमा पारदर्शी हो सकती है, यह बच्चे की पृष्ठभूमि दिखाएगा, माता-पिता की नहीं।

दूसरे शब्दों में, इस सेटिंग ने निम्न प्रभाव पैदा किया:

outline: 7px solid rgba(255, 255, 255, 0.2);

Comments

पूरी कहानी नहीं, बॉर्डर का भी यही असर हो सकता है अगर आप background-clip: padding-box;अपनी स्टाइल में जोड़ते हैं .. :)

— डेनिस 98

Answer 6

W3 स्कूल साइट से

सीएसएस सीमा गुण आप शैली और एक तत्व के बॉर्डर का रंग निर्दिष्ट करने के लिए अनुमति देते हैं।

एक रूपरेखा एक रेखा है जो तत्वों को (सीमाओं के बाहर) "तत्व बाहर" बनाने के लिए बनाई गई है।

रूपरेखा आशुलिपि संपत्ति एक घोषणा में सभी रूपरेखा गुणों को निर्धारित करती है।

जो गुण सेट किए जा सकते हैं, वे हैं (क्रम में): बाह्य-रंग, रूपरेखा-शैली, रूपरेखा-चौड़ाई।

यदि उपरोक्त मानों में से एक गायब है, उदाहरण के लिए, "रूपरेखा: ठोस # ff0000;", लापता संपत्ति के लिए डिफ़ॉल्ट मान डाला जाएगा, यदि कोई हो।

अधिक जानकारी के लिए यहां देखें: http://webdesign.about.com/od/advancedcss/a/outline_stv.bm

Answer 7

एक पुराने सवाल का थोड़ा सा, लेकिन एक फ़ायरफ़ॉक्स रेंडरिंग बग (अभी भी जनवरी '13 के रूप में मौजूद है) का उल्लेख करने के लायक है, जहां रूपरेखा सभी बच्चों के तत्वों के बाहर प्रस्तुत करेगी भले ही वे अपने माता-पिता को ओवरग्लो करें (नकारात्मक मार्जिन, बॉक्स-छाया के माध्यम से) , आदि।)

आप इसे ठीक कर सकते हैं:

.container {
    position: relative;
}
.container:before {
   content: '';
   margin: 0;
   padding: 0;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   outline: 1px solid #ff0000;
}

सुपर दुर्भाग्यपूर्ण है कि यह अभी भी तय नहीं है। मैं बहुत से मामलों में रूपरेखा पसंद करता हूं क्योंकि वे किसी तत्व के आयामों से नहीं जुड़ते हैं, जिससे आपको तत्व के आयाम सेट करते समय सीमा चौड़ाई पर विचार करने से हमेशा बचते हैं।

आखिर कौन सा सरल है?

.container {
    width: 960px;
    height: 300px;
    outline: 3px solid black;
}

या:

.container {
    width: 954px;
    height: 294px;
    border: 3px solid black;
}

Comments

यदि आपने अभी तक ऐसा नहीं किया है, तो box-sizingएक कोशिश करें! लिंक

— ब्रेंडन

इस उत्तर के निचले भाग के उदाहरण समान परिणाम नहीं देते हैं। पहला 3px की आउटलाइन के साथ 960 * 300 का एक बॉक्स देता है जो बॉक्स के बाहर इसे कवर करता है। दूसरा 3px की आउटलाइन के साथ 954 * 294 बॉक्स देता है, जिसमें कुछ भी शामिल नहीं होता है

— पीटर आर।

Answer 8

यह भी ध्यान देने योग्य है, कि W3C की रूपरेखा IE की सीमा है , क्योंकि IE W3C बॉक्स मॉडल को लागू नहीं करता है।

डब्ल्यू 3 सी बॉक्स मॉडल में, सीमा तत्व की चौड़ाई और ऊंचाई से अनन्य है। IE में यह समावेशी है।

Comments

यह IE10 के लिए सही नहीं है। - और ऐसा लगता है कि आप बॉक्स-आकार वाले मॉडल और तथ्य यह है कि रूपरेखा बिल्कुल भी जगह नहीं लेते हैं, चुने गए मॉडल से स्वतंत्र हैं।

— रॉबर्ट सिएमर

Answer 9

मैंने सीएसएस / html कोड का एक छोटा सा टुकड़ा बनाया है ताकि दोनों के बीच का अंतर देखा जा सके।

outlineविशेष रूप से एक इनलाइन कंटेनर में संभावित बाल अतिप्रवाह वाले बाल तत्वों को उत्पन्न करने के लिए बेहतर है ।

borderब्लॉक -behaving तत्वों के लिए बहुत अधिक अनुकूलित है ।

आपके लिए फीलिंग सर!

Answer 10

CSS में आउटलाइन प्रॉपर्टी एक तत्व के बाहर एक रेखा खींचती है। यह सिवाय सीमा के समान है:

• यह हमेशा सभी पक्षों के आसपास जाता है, आप विशेष रूप से निर्दिष्ट नहीं कर सकते
• पक्ष यह बॉक्स मॉडल का हिस्सा नहीं है, इसलिए यह
  तत्व या आसन्न तत्वों की स्थिति को प्रभावित नहीं करेगा

स्रोत: https://css-tricks.com/almanac/properties/o/outline/

Answer 11

"रूपरेखा" का उपयोग करने के एक व्यावहारिक उदाहरण के रूप में, बेहोश बिंदीदार सीमा जो सिस्टम का अनुसरण करता है एक वेबपेज पर केंद्रित है (उदाहरण के लिए; यदि आप लिंक के माध्यम से टैब करते हैं) तो रूपरेखा संपत्ति का उपयोग करके नियंत्रित किया जा सकता है (कम से कम, मुझे पता है कि यह फ़ायरफ़ॉक्स में हो सकता है , अन्य ब्राउज़र की कोशिश नहीं की)।

एक आम "छवि प्रतिस्थापन" तकनीक का उपयोग करना है, उदाहरण के लिए:

<div id="logo"><a href="/">Foo Widgets Ltd.</a></div>

सीएसएस में निम्नलिखित के साथ:

#logo
{
    background: url(/images/logo.png) center center no-repeat;
}
#logo a
{
    display: block;
    text-indent: -1000em;
}

समस्या यह है कि जब फोकस टैग पर पहुंचता है, तो आउटलाइन 1000 मी से बाईं ओर जाती है। रूपरेखा आपको ऐसे तत्वों पर ध्यान देने की रूपरेखा को बंद करने की अनुमति दे सकती है।

मेरा मानना ​​है कि IE डेवलपर टूलबार भी "हुड के नीचे" की तरह कुछ का उपयोग कर रहा है जब "चयन" मोड में निरीक्षण के लिए तत्वों को उजागर कर रहा है। यह अच्छी तरह से इस तथ्य को दर्शाता है कि "रूपरेखा" कोई स्थान नहीं लेती है।

Comments

मैं जानना चाहता हूं कि इस छवि प्रतिस्थापन तकनीक का आविष्कार किसने और क्यों किया। इसका एकमात्र उद्देश्य यह है कि पाठ को किसी भी व्यक्ति के लिए गायब कर दिया जाए, जिसके पास चित्र अक्षम हैं। सामान्य छवि के साथ उचित ऑल्ट टेक्स्ट के साथ क्या गलत है?

— स्टीवर्ट

यह (अब बल्कि आप का उल्लेख बहुत कारण के लिए बदनाम) फार्क विधि है, जो फारेनर इमेज रिप्लेसमेंट का एक अनुकूलन था । मैं बस इसे एक व्यावहारिक अनुप्रयोग के प्रदर्शन के तीव्र तरीके के रूप में उपयोग कर रहा था कि कोई क्यों ध्यान की रूपरेखा को संशोधित करना चाहता है :)

— मैट सच

Answer 12

सीमा के रूप में रूपरेखा के बारे में सोचें कि एक प्रोजेक्टर एक सीमा के रूप में किसी चीज़ के बाहर खींचता है, उस चीज़ के आसपास एक वास्तविक वस्तु है।
एक प्रक्षेपण आसानी से ओवरलैप कर सकता है लेकिन सीमा आपको पास नहीं होने देती है।
कुछ समय जब मैं उपयोग करता हूं grid+%width, बॉर्डर दृश्य पोर्ट पर स्केलिंग को बदल देगा, उदाहरण के लिए width:100%माता-पिता में एक तलाक के साथ width:100pxमाता-पिता को पूरी तरह से भरता है, लेकिन जब मैं border:solid 5pxइसे जोड़ता हूं तो यह बॉर्डर के लिए जगह बनाने के लिए div को छोटा बनाता है (हालांकि यह दुर्लभ है और वर्क-अराउंडेबल!)
लेकिन आउटलाइन के साथ यह समस्या नहीं है क्योंकि आउटलाइन अधिक आभासी है: D यह तत्व के बाहर एक लाइन है, लेकिन समस्या यह है कि यदि आप ठीक से रिक्ति नहीं करते हैं तो यह अन्य सामग्रियों के साथ ओवरलैप होगा।

इसे कम करने के लिए:
पेशेवरों को रेखांकित करें:
यह रिक्ति और पदों के साथ गड़बड़ी नहीं करता है
:
अतिव्याप्ति की संभावना

Answer 13

सीमा और रूपरेखा के बीच अंतर:

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

डेमो:

#border {
  border: 10px solid black;
}
#outline {
  outline: 10px solid black;
}

<html>
<body>
<span id="border">Border</span>Other text<br><br>
<span id="outline">Outline</span>Other text
</body>
</html>

अन्य अंतर:
सीमा के बाहर रूपरेखा प्रदर्शित की गई है।
रूपरेखा में गोल कोने नहीं हो सकते; सीमाएँ कर सकते हैं।

Answer 14

W3Schools से कॉपी किया गया:

परिभाषा और उपयोग

एक रूपरेखा एक रेखा है जो तत्वों को (सीमाओं के बाहर) "तत्व बाहर" बनाने के लिए बनाई गई है।

Comments

यह 2 के बीच का अंतर नहीं बताता है, केवल क्या outlineहै

— कस्पर ली