मैं सीएसएस में चौड़ाई या ऊँचाई को बदलने से कैसे रोक सकता हूँ?

227

मैं DIVs के साथ एक साइट बना रहा हूं । जब मैं एक डीआईवी बनाता हूं, तो छोड़कर सब कुछ काम कर रहा है। मैं उन्हें इस तरह बनाता हूं (उदाहरण):

newdiv {
    width: 200px;
    height: 60px;
    padding-left: 20px;
    text-align: left;
}

जब मैं padding-leftसंपत्ति DIVजोड़ता हूं, परिवर्तनों की चौड़ाई 220px, और मैं चाहता हूं कि यह 200px पर बना रहे।

चलो मैं एक बनाते हैं DIVनामित anotherdivके रूप में बिल्कुल वैसा ही newdivहै, और इसके अंदर डाल दिया newdivलेकिन newdivकोई पैडिंग है और anotherdivहै padding-left: 20px। मुझे एक ही बात मिलती है, newdivचौड़ाई 220px होगी।

मैं इस समस्या को कैसे ठीक करुं?

html css padding

— सैम
स्रोत

3

मुझे यह कहते हुए दुख हो रहा है, लेकिन मुझे पसंद है कि IE इसे कैसे संभालता है ... मेरे लिए बहुत अधिक समझ में आता है ...

— निकु सर्डु

390

संपत्ति जोड़ें:

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

नोट: यह संस्करण 8 से नीचे के इंटरनेट एक्सप्लोरर में काम नहीं करेगा ।

— प्रमोद
स्रोत

14

यह सीमाओं के लिए एक महान समाधान है, लेकिन यह पैडिंग के लिए कैसे मदद करता है?

— काटो

6

यह शुद्ध जादू है! - यह बॉक्स मॉडल को ठीक करता है जिसे हम सभी जानते हैं और नफरत करते हैं! यानी यह काम करता है जिस तरह से अंतर्ज्ञान का सुझाव देता है - इसे चश्मे के बजाय - लेकिन जहां तक मुझे पता है कि किसी भी चश्मे को नहीं तोड़ता है: डी यह लेख इसे अच्छी तरह से स्पष्ट करता है ... stackoverflow.com/questions/779434/-

— technicalbloke

2

@technicalbloke आपका लिंक बस इस प्रश्न पर वापस जाता है।

— mhenry1384

11

जो हाँ, कॉपी और पेस्ट पेस्ट अप। इस कड़ी में मैं शेयर करने के लिए होती है ... paulirish.com/2012/box-sizing-border-box-ftw

— technicalbloke

1

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

— रयान शिलिंग्टन

39

अपने newdiv में एक div डालें width: autoऔरmargin-left: 20px

Newdiv से गद्दी निकालें।

W3 Box मॉडल पेज की अच्छी जानकारी है।

— rvarcher
स्रोत

1

जब आप एक का उपयोग कर सकते हैं तो दो div का उपयोग क्यों करें?

— एरॉन फ्रेंके

26

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

box-sizing: border-box;

— अजय गुप्ता
स्रोत

11

यदि आप div के आकार को बदले बिना div के भीतर पाठ को इंडेंट करना चाहते हैं, तो text-indentइसके बजाय CSS का उपयोग करें padding-left।

.indent {
  text-indent: 1em;
}
.border {
  border-style: solid;
}

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

<br>

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

स्निपेट का विस्तार करें

— mvndaai
स्रोत

1

यह एकमात्र समाधान है जिसे मैंने अपने निश्चित चौड़ाई div के लिए काम किया। बॉक्स-साइज़िंग ने दुर्भाग्य से चौड़ाई को प्रभावित करने से पैडिंग को नहीं रोका, इसलिए इस भयानक छोटी संपत्ति को इंगित करने के लिए एक टन धन्यवाद।

— स्टेवो

8

बस जोड़ें box-sizing: border-box;

— फेलिक्स वोंग
स्रोत

12

यह बिल्कुल वैसा ही है जैसा अन्य उत्तर यहाँ पहले से ही कहते हैं।

— नील लुन

1

जब मैं पैडिंग-लेफ्ट प्रॉपर्टी जोड़ता हूं, तो DIV की चौड़ाई 220px में बदल जाती है

हां, यह बिल्कुल मानकों के अनुसार है। यह कैसे काम करने वाला है।

मान लें कि मैं एक और DIV नाम का एक और DIV बनाता हूं जो बिल्कुल newdiv के समान है, और इसे newdiv के अंदर डालें, लेकिन newdiv में कोई पैडिंग नहीं है और दूसरेdiv में padding-left: 20px है। मुझे एक ही बात मिलती है, newdiv की चौड़ाई 220px होगी;

नहीं, newdiv 200px चौड़ा रहेगा।

— Guffa
स्रोत

2

गुफ़ा, यह नहीं है कि मानकों को कैसे काम करना चाहिए। पैडिंग निश्चित रूप से उस तत्व के आयामों को प्रभावित करने वाला नहीं है, जिस पर इसे लागू किया जा रहा है। सबसे बड़े सम्मान के साथ, क्या यह संभव है कि आप 'मार्जिन' के साथ 'पैडिंग' को भ्रमित कर रहे हैं?

— दा .5

1

हां, पैडिंग निश्चित रूप से तत्व के आयामों को प्रभावित करने वाला है। मुझे लगता है कि यह आप है जो भ्रमित है ... आप यह कैसे प्रस्तावित करते हैं कि मार्जिन तत्व के आयामों को प्रभावित करेगा?

— गुफ़ा

वास्तव में, आप जानते हैं कि मुझे लगता है कि हम दोनों एक तरह से सही हैं। मैं तो उन प्रभावों से मुकाबला करने के लिए अभ्यस्त हूं जिन्हें मैं पूरी तरह से मानक भूल गया हूं। मुझे यहाँ एक अच्छी व्याख्या मिली quirksmode.org/css/box.html

— da5id

तो, मेरी माफी श्री गुफ़ा। लेकिन व्यावहारिक उद्देश्यों के लिए (जो कि आखिर हम किस बारे में बात कर रहे हैं) मेरी सलाह अभी भी अच्छी है?

— da5id

ठीक है, आप अभी तक सही हैं कि एक बॉक्स मॉडल बग है, लेकिन यह इस सवाल पर लागू नहीं होता है ... :)

— गुफ़ा

-1

बस अपनी डिव चौड़ाई को १६० पीएक्स में बदल दें यदि आपके पास २० पीएक्स की पैडिंग है तो यह आपकी डी वी की चौड़ाई में ४० पीएक्स अतिरिक्त जोड़ देता है ताकि आपको अपनी डी वी को सामान्य दिखने के लिए चौड़ाई से ४० पीएक्स को घटाना पड़े और उस पर अतिरिक्त चौड़ाई के साथ विकृत न हो। आपके पाठ ने सब गड़बड़ कर दिया।

— शॉन
स्रोत

2

यह @rvarcher द्वारा दिए गए उत्तर के समान है।

— 8bitjunkie