जब 1 px बॉर्डर को div में जोड़ा जाता है, तो Div का आकार बढ़ जाता है, ऐसा मत करना

Question

क्लिक करने पर मैं div में 1px बॉर्डर जोड़ रहा हूं, इसलिए Div का आकार 2px X 2px बढ़ जाता है। मैं div आकार में वृद्धि नहीं करना चाहता। क्या ऐसा करने का कोई सरल तरीका है?

गन्दा विस्तृत विवरण
दरअसल मैं DIV को फ्लोट के साथ जोड़ रहा हूँ: एक कंटेनर-डिव के लिए बाएँ (समान आकार, चिह्न की तरह), इसलिए सभी एक के बाद एक ढेर हो जाते हैं, और जब (कंटेनर-डिव चौड़ाई 300px होती है) तो कोई जगह शेष चौड़ाई-वार नहीं होती है चाइल्ड डीआईवी अगली पंक्ति में आता है, इसलिए इसका कैटलॉग पसंद है, लेकिन सीमा के कारण केवल चयनित डीआईवी का आकार बढ़ जाता है, चयनित डीआईवाई के तहत डीआईवी दाईं ओर जाती है और चयनित डीआईवाई के नीचे खाली स्थान बनाती है।

संपादित करें:
चयन पर ऊँचाई / चौड़ाई घटाना, लेकिन इसे वापस कैसे बढ़ाया जाए। कुछ 3 पार्टी फ्रेमवर्क का उपयोग करना, ताकि DIV के चयन के समय घटना न हो।

Comments

stackoverflow.com/questions/9601357/…

— गार्थ बेकर

Answer 1

सीमा सीएसएस संपत्ति सभी तत्वों "बाहरी" आकार में वृद्धि करेगी, तालिकाओं में टीएस को बाहर निकालती है। Html-> लेआउट टैब के तहत आप फायरबग ( बंद ) में यह कैसे काम करता है, इसका एक दृश्य विचार प्राप्त कर सकते हैं ।

एक उदाहरण के रूप में, 10px की चौड़ाई और ऊंचाई के साथ एक div और 1px की सीमा के साथ बाहरी चौड़ाई और 12px की ऊंचाई होगी।

आपके मामले के लिए, यह प्रकट करने के लिए कि बॉर्डर div के "अंदर" पर है, आपके चयनित सीएसएस वर्ग में, आप अपने बॉर्डर आकार को दोगुना करके तत्व की चौड़ाई और ऊंचाई को कम कर सकते हैं, या आप इसके लिए भी ऐसा कर सकते हैं तत्वों गद्दी।

उदाहरण के लिए:

div.navitem
{
    width: 15px;
    height: 15px;
    /* padding: 5px; */
}

div.navitem .selected
{
    border: 1px solid;
    width: 13px;
    height: 13px;
    /* padding: 4px */
}

Comments

thnx, मेरे पास .dragdrop- चयनित वर्ग था लेकिन इसका उपयोग सभी ड्रैग करने योग्य वस्तुओं द्वारा किया गया था और मुझे ड्रैगबल ऑब्जेक्ट के 3 अलग-अलग आकार (3 अलग-अलग प्रकार) पसंद थे, इसलिए मैंने सभी 3 में एक ही पैडिंग रखा और .dragdrop- चयनित में सेट किया। । & इसने काम कर दिया। :)

— नचिकेत

यह उत्तरदायी डिजाइनों के लिए एक अच्छा समाधान नहीं है। outlineपृष्ठभूमि के रूप में एक ही रंग के साथ या एक सीमा का उपयोग करना (और जब इसका चयन किया जाता है तो इसका रंग कुछ और बदलना) अधिक लचीला होता है।

— अलीबज

लेकिन मान लें कि आपको हार्ड-कोडिंग से बचने की ज़रूरत है, तत्व को प्रवाह या व्यू-पोर्ट चौड़ाई पर प्रतिक्रिया करने के लिए: मेरे उत्तर का उपयोग करके देखेंborder-color: transparent

— एडवर्ड नेवेल

इन गणनाओं के लिए कोई ज़रूरत नहीं है, बस बॉक्स-आकार को सीमा-बॉक्स पर सेट करें। देखें नीचे ejfrancis 'जवाब , और देखते हैं इस लेख ।

— jbyrd

क्या आप तालिकाओं में td के बारे में निश्चित हैं? क्रोम में यह अभी भी आकार में जोड़ता है।

— रक्षक एक

Answer 2

इस परिदृश्य में भी यह मददगार है। यह आपको दिव्य चौड़ाई को बदलने के बिना सीमा निर्धारित करने की अनुमति देता है

textarea { 
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

Http://css-tricks.com/box-sizing/ से लिया गया

Comments

बॉक्स-साइजिंग: बॉर्डर-बॉक्स को वास्तव में आधुनिक सर्वोत्तम अभ्यास के रूप में हर चीज पर सेट किया जाना चाहिए। Paulirish.com/2012/box-sizing-border-box-ftw

— jbyrd

यह कुछ मामलों में काम नहीं करता है; निश्चित रूप से क्यों नहीं। देखें: codepen.io/anon/pen/QZaBQG

— विल्सन बिग्स

Answer 3

पृष्ठभूमि के समान रंग होने के लिए क्लिक करने से पहले उस पर बॉर्डर सेट करें।

फिर जब आप क्लिक करेंगे तो केवल बैकग्राउंड का रंग बदल जाएगा और चौड़ाई नहीं बदलेगी।

Comments

सरल! काश मैंने खुद ऐसा सोचा होता।

— रिजुल गुप्ता

हाँ, लेकिन अगर आपके पास एक ठोस रंग की पृष्ठभूमि नहीं है? मेरे उत्तर का उपयोग करके देखेंborder-color: transparent

— एडवर्ड नेवेल

Answer 4

एक और अच्छा समाधान के outlineबजाय उपयोग करने के लिए है border। यह बॉक्स मॉडल को प्रभावित किए बिना एक सीमा जोड़ता है। यह IE8 +, क्रोम, फ़ायरफ़ॉक्स, ओपेरा, सफारी पर काम करता है।

( https://stackoverflow.com/a/8319190/2105930 )

Comments

यह बहुत अच्छा है, लेकिन सीमा की तुलना में, मेरे मामले के लिए कोई "रूपरेखा-वाम, ..." नहीं है।

— Imskull

तब मैं उपयोग करने की अनुशंसा box-shadowप्रति मेरे दूसरे सवाल का जवाब एक समान प्रश्न पर। इसमें समान ब्राउज़र समर्थन नहीं है, लेकिन यह इन दिनों एक समस्या से कम है।

— सुबह

धन्यवाद #chowey, बस एहसास box-shadowएक पक्ष सीमा के रूप में अच्छी तरह से, प्रीफेक्ट समाधान का समर्थन कर सकते हैं।

— Imskull

border-color: transparentबेहतर क्रॉस-ब्राउज़र समर्थन है --- मेरा जवाब देखें ...

— एडवर्ड नेवेल

इस टिप्पणी के अंडर रेटेड। यह एक आकार के बिना एक तत्व के चारों ओर एक सीमा प्राप्त करने का एक शानदार तरीका है!

— सेबेस्टियन नेमेथ

Answer 5

इसे बदलने borderका प्रयास करें outline:

outline: 1px solid black;

Comments

जब तक आपके पास सीमा-त्रिज्या न हो, तब तक काम करता है।

— जीन-मेरी डालमासो

Answer 6

इनमें से कई समाधानों का उपयोग करने के बाद, मैं border-color: transparentसबसे अधिक लचीला और व्यापक रूप से समर्थित होने के लिए सेटिंग की चाल का उपयोग करता हूं :

.some-element {
    border: solid 1px transparent;
}

.some-element-selected {
    border: solid 1px black;
}

यह बेहतर क्यों है:

• तत्व की चौड़ाई को हार्ड-कोड करने की आवश्यकता नहीं है
• ग्रेट क्रॉस-ब्राउज़र सपोर्ट (केवल IE6 छूट गया)
• इसके विपरीत outline, आप अभी भी, उदाहरण के लिए, ऊपर और नीचे की सीमाओं को अलग-अलग निर्दिष्ट कर सकते हैं
• सीमा रंग निर्धारित करने के विपरीत, वह पृष्ठभूमि बदलने पर आपको इसे अपडेट करने की आवश्यकता नहीं है, और यह गैर-ठोस रंगीन पृष्ठभूमि के साथ संगत है।

Comments

मुझे यह अपने UX में गतिशील रूप से आकार की वस्तुओं के साथ सबसे अच्छा काम करने के लिए मिला। बंद हो रहा आकार-स्थानांतरण पूरी तरह से हो रहा है! धन्यवाद श्री नेवेल!

— d3r3kk

मिलनसार। धन्यवाद!

— हैराल्ड होवरविक

वही है वो!

— जबकि सच

transparentयह क्या जरूरत है!

— डिंपियाक्स

मुझे यही चाहिए (Y)

— HaxxanRaxa

Answer 7

इसे इस्तेमाल करे

box-sizing: border-box;

Comments

यह उत्तर, गंदगी सरल होना चाहिए।

— Spets

यह हर जगह काम क्यों नहीं करता है? उदाहरण के लिए कोडपीन.आईओ

— टॉम 11

हाय @Tom, मुझे यकीन नहीं है कि यह अभी तक काम क्यों नहीं करता है। लेकिन आपके मामले में कृपया कंटेनर में ऊंचाई को हटाने और इसके बजाय पैडिंग का उपयोग करने पर विचार करें। आपकी समस्या का समाधान कर सकता है।

— होआंग ट्रुंग

Answer 8

मैं आमतौर पर इस मुद्दे को हल करने के लिए पैडिंग का उपयोग करता हूं। जब सीमा गायब हो जाती है और सीमा दिखाई देने पर हटा दी जाती है, तो पैडिंग को जोड़ा जाएगा। नमूना कोड:

.good-border {
  padding: 1px;
}

.good-border:hover {
  padding: 0px;
  border: 1px solid blue;
}

JSFiddle पर मेरा पूरा नमूना कोड देखें: https://jsfiddle.net/3t7vyebt/4/

Comments

क्या आप मुझे बता सकते हैं कि वास्तव में क्या हो रहा है, मैं उलझन में हूं, जब आप इस पर मंडराते हैं तो यहां खराब बॉर्डर हॉवर नीचे की ओर क्यों जाता है?

— सूरज जैन

@SurajJain क्योंकि "खराब बॉर्डर" div का आकार बदल जाएगा (जब आप बॉर्डर को जोड़ सकते हैं)।

— थो

Answer 9

बस सीमा-चौड़ाई के दोगुने से चौड़ाई और ऊँचाई कम करें

Answer 10

आप इनसेट शैडो के साथ कुछ फैंसी चीजें कर सकते हैं। एक तत्व के नीचे एक सीमा को उसके आकार को बदलने के बिना रखने के लिए उदाहरण:

.bottom-border {
  box-shadow:inset 0px -3px 0px #000;
}

Answer 11

कभी-कभी आप स्पष्ट रूप से सेटिंग के बिना ऊंचाई या चौड़ाई को प्रभावित नहीं करना चाहते हैं। उस स्थिति में, मुझे छद्म तत्वों का उपयोग करना उपयोगी लगता है।

.border-me {
    position: relative;
}

.border-me::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: solid 1px black;
}

आप छद्म तत्व के साथ भी बहुत कुछ कर सकते हैं इसलिए यह एक बहुत शक्तिशाली पैटर्न है।

Comments

मुझे लगता है कि मैं 2px को बदलना चाहते 1px का बॉर्डर था, और एक ही रास्ता मैं ऐसा करने के मिल सकता है कि को हटाने के द्वारा किया गया था widthऔर heightऔर एक जोड़ने bottomऔर leftके अलावा संपत्ति topऔर leftजो सभी के विपरीत चौड़ाई सेट किया जाना चाहिए, मूल सीमा (मेरे मामले में -1px)। महान हैक हालांकि

— चेस सैंडमैन

Answer 12

जब आप सीमा बढ़ाते हैं तो मार्जिन आकार को कम करने का प्रयास करें

Answer 13

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

अल्पविराम द्वारा अलग किए गए मान। यहाँ एक सरल उदाहरण दिया गया है:

.add_border {
    box-shadow:-1px 0 1px 1px rgba(0, 0, 0, 0.75), inset -1px 0 0 1px rgba(0, 0, 0, 0.75);
}

jsfiddle

अपने पसंदीदा लुक के लिए समायोजित करें और आप जाने के लिए अच्छे हैं!

Answer 14

हम css calc () फ़ंक्शन का भी उपयोग कर सकते हैं

width: calc(100% - 2px);

सीमाओं के लिए 2px घटाना

Answer 15

.filter_list_button_remove {
    border: 1px solid transparent; 
    background-color: transparent;
}
.filter_list_button_remove:hover {
    border: 1px solid; 
}

Comments

मुझे लगता है कि यह ओपी और आगे आने वाले दर्शकों के लिए अधिक उपयोगी होगा, जब आप अपने इंटेंस के लिए कुछ स्पष्टीकरण जोड़ते हैं।

— रिपोर्टर

Answer 16

आप अपनी पृष्ठभूमि के रंग के साथ बॉर्डर वाला तत्व बना सकते हैं, फिर जब आप बॉर्डर दिखाना चाहते हैं, तो बस उसका रंग बदल दें।

Comments

हाँ, लेकिन मान लीजिए आपकी पृष्ठभूमि कोई ठोस रंग नहीं है ... मेरी प्रतिक्रिया का उपयोग करके देखेंborder-color: transparent

— एडवर्ड नेवेल

या सभी एक साथ जैसेul li a{border-bottom:2px solid transparent;} ul li a:hover{border-bottom:2px solid red;}

— flowflow

Answer 17

यदि आपकी सामग्री को divगतिशील रूप से प्रदान किया जाता है और आप इसकी ऊंचाई निर्धारित करना चाहते हैं, तो आप इसके साथ एक सरल ट्रिक का उपयोग कर सकते हैं outline:

button {
    padding: 10px;
    border: 4px solid blue;
    border-radius: 4px;
    outline: 2px solid white;
    outline-offset: -4px;
}

button:hover {
    outline-color: transparent;
}

यहाँ उदाहरण: https://codepen.io/Happysk/pen/zeQzaZ

Comments

रूपरेखा दुर्भाग्य से गोल कोनों नहीं है :(

— M3RS

Answer 18

आप बॉक्स-शैडो इनसेट आज़मा सकते हैं

कुछ इस तरह से: बॉक्स-छाया: इनसेट 0px -5px 0px 0px 0px #fff

आकार में वृद्धि के बिना तत्व के नीचे एक सफेद 5px सीमा जोड़ता है