टेक्स्टरेरा चौड़ाई युक्त div

Question

के साथ संरेखित नहीं है, मुझे आश्चर्य है कि टेक्स्टरेरा युक्त div के साथ गठबंधन करने से इनकार क्यों करता है?

<!-- the textarea pokes out--> 
<div style="border:1px solid #ccc; width:300px"> 
    <textarea style="width:100%"></textarea> 
</div> 

यह मेरे तत्वों

Answer 1

डिफ़ॉल्ट रूप से, <textarea> तत्व इसके चारों ओर की सीमा के साथ प्रस्तुत किया जाता है। इसके साथ समस्या यह है कि जब आप किसी तत्व पर width प्रॉपर्टी सेट करते हैं, तो आप केवल सामग्री चौड़ाई सेट कर रहे हैं, कुल चौड़ाई नहीं। तत्व की कुल चौड़ाई (चौड़ाई + सीमा + पैडिंग + मार्जिन) है, इसलिए जब आप <textarea> पर width सेट करते हैं तो यह सामग्री चौड़ाई से 300px पर सेट करता है लेकिन कुल चौड़ाई 300px प्लस डिफ़ॉल्ट सीमाएं होती है, जिसके कारण यह <div> की 300px चौड़ाई से अधिक हो जाता है।

आप गद्दी/मार्जिन का उपयोग कर <div> में इन सीमाओं को समायोजित कर सकता हूँ, लेकिन एक बेहतर समाधान करने के लिए सब कुछ की कुल चौड़ाई को परिभाषित करने के width संपत्ति के लिए मजबूर करने के लिए border-box<textarea> पर box-sizing गुण सेट करने के लिए हो सकता है और तत्व की सीमा सहित।

क्योंकि यह सभी ब्राउज़रों (जैसे -moz-box-sizing, -ms-box-sizing, -webkit-box-sizing, आदि) में अलग ढंग से घोषित होने पर आपको उस प्रॉपर्टी के अनुसंधान के एक बिट करने की आवश्यकता होगी। आप के लिए देखने के लिए Here is the QuirksMode page on box-sizing।

box-sizing फ़ायरफ़ॉक्स के लिए फ़िक्स काम करता है, लेकिन मैंने इसे अन्य ब्राउज़रों में परीक्षण नहीं किया है। यह संभव है कि उनमें से कुछ, विशेष रूप से जब quirks/विरासत मोड में, तत्व के लिए मार्जिन भी लागू कर सकते हैं। यदि ऐसा है, तो आपको केवल सीएसएस के साथ मार्जिन को हटाने की आवश्यकता होगी (AFAIK, box-sizing के लिए व्यापक रूप से समर्थित विकल्प नहीं है जो मार्जिन तक फैला हुआ है - केवल सामग्री, पैडिंग और सीमा के लिए)।

मैं इसे ठीक से विशिष्ट जा रहा है, और केवल बाईं/सही मार्जिन हटाने के सुझाव देंगे (यानी margin-left: 0; margin-right: 0;) (यानी margin: 0;) किसी भी ऊपर/नीचे मार्जिन बनाए रखने के लिए नहीं बल्कि मार्जिन पूरी तरह से दूर करने की तुलना में अगर वे मौजूद हैं (और अगर आप चाहते हैं उन्हें रखने के लिए)। मुझे पता है कि फ़ायरफ़ॉक्स शीर्ष/नीचे एक 1px मार्जिन लागू करता है, और अन्य ब्राउज़र भी हो सकते हैं।

Answer 2

के संरेखण को सुनिश्चित करने में कठिनाई खड़ी कर रहा है मैंने कोशिश की है कि फायरफॉक्स, क्रोम और IE, और वे सभी यह ठीक से दिखाई देते हैं। मुझे संदेह है कि आप डीआईवी एक और कंटेनर के अंदर है और इससे समस्या पैदा हो रही है।

कृपया अपने कोड का एक हिस्सा जोड़ें।

Answer 3

टेक्स्टरेरा में इसका मार्जिन लागू हो सकता है। इस प्रयास करें:

<div style="border:1px solid #ccc; width:300px"> 
    <textarea style="width:100%; margin: 0;"></textarea> 
</div> 

Answer 4

<div style="border:1px solid #ccc; width:300px"> 
    <textarea style="width:100%"></textarea> 
</div> 

परीक्षण किया फ़ायरफ़ॉक्स 3.6.10, इंटरनेट एक्सप्लोरर 8 और गूगल क्रोम पर काम कर रहा।

लेकिन, हो सकता है बजाय एक DIV में यह enclosing की, आप भी यह कोशिश कर सकते हैं:

<textarea style="border:1px solid #ccc; width:300px"></textarea> 

के बारे में कौन सा अपने मूल कोड के रूप में ही दिखता है।