डिव के अंदर बॉर्डर रखना और उसके किनारे पर नहीं

Question

मेरे पास एक <div> तत्व है और मैं इस पर एक सीमा लगाना चाहता हूं। मुझे पता है कि मैं लिख सकता हूं style="border: 1px solid black", लेकिन इससे 2px जुड़ जाता है, जो मुझे नहीं चाहिए।

मैं इस सीमा को div के किनारे से -1px होगा। Div खुद 100px x 100px है, और अगर मैं एक सीमा जोड़ता हूं, तो मुझे सीमा को प्रकट करने के लिए कुछ गणित करना होगा।

क्या कोई ऐसा तरीका है जिससे मैं सीमा को प्रकट कर सकता हूं, और यह सुनिश्चित कर सकता हूं कि बॉक्स अभी भी 100px (सीमा सहित) होगा?

Comments

इसके लायक क्या है, मैंने उन लोगों के लिए एक समाधान पोस्ट किया है जो एक ऑफसेट के

— डैनिल्ड

Answer 1

इसके box-sizingलिए संपत्ति सेट करें border-box:

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100px;
    height: 100px;
    border: 20px solid #f00;
    background: #00f;
    margin: 10px;
}

div + div {
    border: 10px solid red;
}

<div>Hello!</div>
<div>Hello!</div>

यह IE8 और इसके बाद के संस्करण पर काम करता है ।

Comments

+1। : कुछ अधिक पृष्ठभूमि के लिए css-tricks.com/box-sizing या paulirish.com/2012/box-sizing-border-box-ftw

— isotrope

केवल एक दोष यह है कि आप इसे काम करने के लिए एक ऊंचाई घोषित करना चाहते हैं, एक ऊंचाई के बिना सीमा अभी भी ब्लॉक के बाहर बैठती है और प्रतिपादन (यानी ऊर्ध्वाधर लय) को प्रभावित करती है।

— 13

यह व्यक्तिगत सीमा-पक्षों को स्टाइल करने की अनुमति नहीं देता है, और इस मामले में कई संपत्ति का उपयोग करने से खुश होंगे outline।

— लॉरेंज लो सॉयर

जेरेमाइक्लेर्क नोट उत्तर में होना चाहिए, क्योंकि ऊंचाई निर्धारित किए बिना कोड काम नहीं करता है। साइड-नोट: अधिकतम ऊंचाई तब तक काम करती है, जब तक कि उस संपत्ति का उपयोग नहीं किया जाता है, यदि ऊंचाई अधिकतम ऊंचाई तक नहीं पहुंचती है तो यह काम नहीं करेगी।

विक्रेता उपसर्ग box-sizing caniuse.com/#search=box-sizing के

— thelostspore

Answer 2

आप इस तरह से बॉक्स-शैडो का भी उपयोग कर सकते हैं:

div{
    -webkit-box-shadow:inset 0px 0px 0px 10px #f00;
    -moz-box-shadow:inset 0px 0px 0px 10px #f00;
    box-shadow:inset 0px 0px 0px 10px #f00;
}

यहाँ उदाहरण: http://jsfiddle.net/nVyXS/ (सीमा को देखने के लिए हॉवर)

यह आधुनिक ब्राउज़रों में ही काम करता है। उदाहरण के लिए: नहीं IE 8 समर्थन। अधिक जानकारी के लिए caniuse.com (बॉक्स-शैडो फीचर) देखें ।

Comments

इस घोल से प्यार करें क्योंकि यह एक ऊंचाई पर सेट होने के बावजूद सीमा को पूरी तरह से बॉक्स के अंदर रखता है। बिल्कुल सही अगर आप बॉर्डर चाहते हैं जिसका बॉक्स के बाहर कोई प्रभाव नहीं है। यहाँ 2px की टॉप-बॉर्डर के लिए CSS है: "इनसेट 0px 2px 0px 0px 0px #DDD"

— jerclarke

पसंदीदा समाधान। Btw, सभी प्रमुख ब्राउज़र आज उपसर्ग के बिना सादे बॉक्स-छाया का समर्थन करते हैं।

— पॉइंटर नल

एक नकारात्मक पक्ष यह है कि कुछ ब्राउज़र बॉक्स-छाया को सही ढंग से प्रिंट करने में विफल रहते हैं और हमेशा इसे # 000 के रूप में प्रिंट करते हैं। यदि आप पृष्ठ को प्रिंट करने में सक्षम होना चाहते हैं तो यह COULD एक शो स्टॉपर होगा।

— रोब फॉक्स

बहुत बढ़िया! मुझे लगता है कि यह पहले उत्तर से बेहतर है।

— AGamePlayer

दूसरे की पूरी कोशिश की .. यह स्वीकार किए गए जवाब से बेहतर है।

— अहसन अरशद

Answer 3

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

box-shadowसीएसएस संपत्ति के माध्यम से आंतरिक सीमा

हां, बॉक्स-छाया का उपयोग तत्वों में बॉक्स-छाया को जोड़ने के लिए किया जाता है। लेकिन आप insetछाया को निर्दिष्ट कर सकते हैं , जो छाया की तरह एक आंतरिक सीमा की तरह दिखेगा। आपको बस उस क्षैतिज और ऊर्ध्वाधर छाया को सेट करने की आवश्यकता है 0px, और सीमा की चौड़ाई की " spread" संपत्ति जो box-shadowआप चाहते हैं। तो 10px की 'आंतरिक' सीमा के लिए आप निम्नलिखित लिखेंगे:

div{
    width:100px;
    height:100px;
    background-color:yellow;
    box-shadow:0px 0px 0px 10px black inset;
    margin-bottom:20px;
}

यहाँ jsField उदाहरण है जो box-shadowबॉर्डर और 'सामान्य' बॉर्डर के बीच के अंतर को दिखाता है । इस तरह आपकी सीमा और बॉक्स की चौड़ाई सीमा सहित कुल 100px है।

बॉक्स-शैडो के बारे में अधिक जानकारी: यहाँ

सीमा सीएसएस संपत्ति के माध्यम से सीमा

यहाँ एक और दृष्टिकोण है, लेकिन इस तरह बॉर्डर बॉक्स के बाहर होगा। यहाँ एक उदाहरण है । उदाहरण के रूप में, आप सीएसएस outlineसंपत्ति का उपयोग कर सकते हैं, सीमा निर्धारित करने के लिए जो तत्व की चौड़ाई और ऊंचाई को प्रभावित नहीं करती है। इस तरह, बॉर्डर की चौड़ाई किसी तत्व की चौड़ाई में नहीं जोड़ी जाती है।

div{
   width:100px;
   height:100px;
   background-color:yellow;
   outline:10px solid black;
}

रूपरेखा के बारे में अधिक जानकारी: यहाँ

Comments

बाह्यरेखा के लिए +1, यह एक बहुत ही प्रभावी तरीका है और यहां तक ​​कि आपके w3schools पृष्ठ का भी उल्लेख करता है: «IE8 केवल बाह्य संपत्ति का समर्थन करता है यदि एक (DOCTYPE निर्दिष्ट किया गया है!»

— आर्मफूट

ध्यान दें: रूपरेखा सीमा-त्रिज्या (क्रोम में परीक्षण) का सम्मान नहीं करती है

— निक

Answer 4

याहू! यह वास्तव में संभव है। मुझे यह मिला।

नीचे की सीमा के लिए:

div {box-shadow: 0px -3px 0px red inset; }

शीर्ष सीमा के लिए:

div {box-shadow: 0px 3px 0px red inset; }

Answer 5

छद्म तत्व का उपयोग करें :

.button {
    background: #333;
    color: #fff;
    float: left;
    padding: 20px;
    margin: 20px;
    position: relative;
}

.button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 5px solid #f00;
}

<div class='button'>Hello</div>

::afterआप का उपयोग करके चयनित तत्व के आभासी अंतिम बच्चे को स्टाइल कर रहे हैं। contentसंपत्ति एक अनाम प्रतिस्थापित तत्व बनाता है ।

हम अभिभावक के सापेक्ष पूर्ण स्थिति का उपयोग करते हुए छद्म तत्व से युक्त हैं। फिर आपको अपने मुख्य तत्व की पृष्ठभूमि में जो भी कस्टम बैकग्राउंड और / या बॉर्डर है, उसकी स्वतंत्रता है।

यह दृष्टिकोण मुख्य तत्व की सामग्री के स्थान को प्रभावित नहीं करता है, जो उपयोग करने से अलग है box-sizing: border-box; ।

इस उदाहरण पर विचार करें:

.parent {
    width: 200px;
}

.button {
    background: #333;
    color: #fff;
    padding: 20px;
    border: 5px solid #f00;
    border-left-width: 20px;
    box-sizing: border-box;
}

<div class='parent'>
    <div class='button'>Hello</div>
</div>

यहाँ .buttonमूल तत्व का उपयोग करते हुए चौड़ाई को विवश किया जाता है। border-left-widthसामग्री-बॉक्स के आकार को समायोजित करना और इस प्रकार पाठ की स्थिति।

.parent {
    width: 200px;
}

.button {
    background: #333;
    color: #fff;
    padding: 20px;
    position: relative;
}

.button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 5px solid #f00;
    border-left-width: 20px;
}

<div class='parent'>
    <div class='button'>Hello</div>
</div>

छद्म तत्व दृष्टिकोण का उपयोग सामग्री-बॉक्स आकार को प्रभावित नहीं करता है।

आवेदन के आधार पर, एक छद्म तत्व का उपयोग करके दृष्टिकोण एक वांछनीय व्यवहार हो सकता है या नहीं भी हो सकता है।

Comments

उत्तम! मैंने पाया कि अगर आप इसे इस्तेमाल करना चाहते हैं तो यह भी काम करता है :Before।

— स्पास्टिकनांजा

बकाया! एकमात्र समाधान जिसने गैलरी छवि वाले लंगर टैग पर मेरे लिए काम किया। मैं इस तथ्य को पसंद करता हूं कि यह छवि को स्केल नहीं करता है, लेकिन इसके बजाय नेत्रहीन क्लिप किनारों।

— रेज़्ज़र्ड जोर्डाज़क

Answer 6

यद्यपि इस सवाल का पहले से ही गुणों box-shadowऔर outlineगुणों का उपयोग करते हुए समाधानों के साथ पर्याप्त रूप से उत्तर दिया गया है , मैं उन सभी के लिए इस पर थोड़ा विस्तार करना चाहूंगा जो यहां उतरे हैं (अपने आप की तरह) एक ऑफसेट के साथ आंतरिक सीमा के लिए समाधान खोज रहे हैं।

तो मान लें कि आपके पास एक काली 100px x 100px है divऔर आपको इसे एक सफेद बॉर्डर के साथ इनसेट करने की आवश्यकता है - जिसमें 5px ( इनर ) की आंतरिक ऑफसेट है - यह अभी भी उपरोक्त गुणों के साथ किया जा सकता है।

डब्बे की छाया

यहाँ ट्रिक यह जानने के लिए है कि मल्टीपल बॉक्स-शैडो की अनुमति है, जहाँ पहली शैडो शीर्ष पर है और बाद की शैडो में z- क्रम कम है।

उस ज्ञान के साथ, बॉक्स-शैडो घोषणा होगी:

box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white;

div {
  width: 100px;
  height: 100px;
  background: black;
  box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white; 
}

<div></div>

मूल रूप से, वह घोषणा जो कह रही है वह है: अंतिम (10px सफ़ेद) छाया पहले प्रस्तुत करें, फिर पिछली 5px काली छाया उसके ऊपर प्रस्तुत करें।

रूपरेखा -ऑफसेट के साथ रूपरेखा

आउटलाइन घोषणाओं के ऊपर के समान प्रभाव के लिए:

outline: 5px solid white;
outline-offset: -10px;

div {
  width: 100px;
  height: 100px;
  background: black;
  outline: 5px solid white;
  outline-offset: -10px;
}

<div></div>

NB: outline-offset IE द्वारा समर्थित नहीं है अगर यह आपके लिए महत्वपूर्ण है।

---

कोडपेन डेमो

Answer 7

आप गुणों का उपयोग कर सकते हैं outlineऔर outline-offsetएक नियमित मूल्य के बजाय एक नकारात्मक मूल्य के साथ border, मेरे लिए काम करता है:

div{
    height: 100px;
    width: 100px;
    background-color: grey;
    margin-bottom: 10px; 
}

div#border{
    border: 2px solid red;
}

div#outline{
    outline: 2px solid red;
    outline-offset: -2px;
}

Using a regular border.
<div id="border"></div>

Using outline and outline-offset.
<div id="outline"></div>

Comments

धन्यवाद, इस जवाब ने 2019 में मेरा दिन बचा लिया :)

— alx

सुंदर! यह "एक" होना चाहिए!

— पेड्रो फरेरा

Answer 8

मुझे पता है कि यह कुछ हद तक पुराना है, लेकिन चूंकि "सीमा के अंदर" कीवर्ड ने मुझे सीधे यहां उतारा है, मैं कुछ निष्कर्षों को साझा करना चाहूंगा जो यहां उल्लेख के लायक हो सकते हैं। जब मैं होवर राज्य पर एक सीमा जोड़ रहा था, तो मुझे ओपी के बारे में बात करने वाले प्रभाव मिले। बॉर्डर विज्ञापनों को बॉक्स के आयाम के लिए पिक्सेल करता है जिसने इसे उछल दिया। इससे निपटने के लिए दो और तरीके हैं जो IE7 के लिए भी काम करते हैं।

1) एक सीमा पहले से ही तत्व से जुड़ी है और बस रंग बदलें। इस तरह गणित पहले से ही शामिल है।

div {
   width:100px;
   height:100px;
   background-color: #aaa;
   border: 2px solid #aaa; /* notice the solid */
}

div:hover {
   border: 2px dashed #666;
}

2) एक नकारात्मक मार्जिन के साथ अपनी सीमा को मुआवजा। यह अभी भी अतिरिक्त पिक्सेल जोड़ देगा, लेकिन तत्व की स्थिति उछल नहीं होगी

div {
   width:100px;
   height:100px;
   background-color: #aaa;
}

div:hover {
  margin: -2px;
  border: 2px dashed #333;
}

Answer 9

नए और पुराने ब्राउज़रों के बीच निरंतर प्रतिपादन के लिए, एक डबल कंटेनर जोड़ें, बाहरी चौड़ाई के साथ, आंतरिक सीमा के साथ।

<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>

यह स्पष्ट रूप से केवल तभी है जब आपकी सटीक चौड़ाई अतिरिक्त मार्कअप होने से अधिक महत्वपूर्ण है!

Answer 10

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

div p {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 150px;
    height:100%;
    border: 20px solid #f00;
    background-color: #00f;
    color:#fff;
    padding: 10px;
  
}

<div>
  <p>It was popularised in the 1960s with the release of Letraset sheets</p>
</div>

Comments

वह बोली क्या बात है

— Chud37

Answer 11

बेस्ट क्रॉस ब्राउज़र सॉल्यूशन (ज्यादातर IE सपोर्ट के लिए) जैसे @Steve ने कहा कि उसके चारों ओर एक बॉर्डर 1 पीएक्स जोड़ने की तुलना में चौड़ाई और ऊंचाई में एक 98px div बनाना है, या आप div 100x100 px के लिए बैकग्राउंड इमेज बना सकते हैं और उस पर बॉर्डर बना सकते हैं।

Answer 12

आप ऑफ़सेट के साथ रूपरेखा देख सकते हैं, लेकिन यह आपके div पर मौजूद होने के लिए कुछ पैडिंग की आवश्यकता है। या आप बिल्कुल अंदर एक सीमा div स्थिति, कुछ इस तरह कर सकते हैं

<div id='parentDiv' style='position:relative'>
  <div id='parentDivsContent'></div>
  <div id='fakeBordersDiv' 
       style='position: absolute;width: 100%;
              height: 100%;
              z-index: 2;
              border: 2px solid;
              border-radius: 2px;'/>
</div>

आपको अपनी पसंद के अनुसार नकली बॉर्डर डिव पर मार्जिन के साथ फिडेल करने की आवश्यकता हो सकती है।

Answer 13

एक और आधुनिक समाधान सीएसएस का उपयोग करने के लिए variablesऔर हो सकता है calc। calcव्यापक रूप से समर्थित है, लेकिन variablesIE11 में अभी तक उपलब्ध नहीं है (पॉलीफ़िल उपलब्ध)।

:root {
  box-width: 100px;
  border-width: 1px;
}

#box {
  width: calc(var(--box-width) - var(--border-width));
}

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

यदि निश्चित ऊंचाई की आवश्यकता नहीं है तो यह समाधान वास्तव में उपयोगी है ।

Answer 14

एक समाधान जो मैंने ऊपर नहीं देखा था, वह मामला है जहां आपके पास आपके इनपुट पर पैडिंग है, जो मैं 99% समय पर करता हूं। आप की तर्ज पर कुछ कर सकते हैं ...

input {
  padding: 8px;
}

input.invalid {
  border: 2px solid red;
  padding: 6px; // 8px - border or "calc(8px - 2px)"
}

इसके बारे में मुझे जो पसंद है वह यह है कि मेरे पास प्रत्येक पक्ष के लिए सीमा + पैडिंग + संक्रमण गुणों का पूरा मेनू है।