चौड़ाई बढ़ाने के बिना मैं टेक्स्टरेरा में पैडिंग कैसे जोड़ सकता हूं?

Question

मुझे एक टेक्स्टरेरा तत्व की चौड़ाई सेट करने और सीएसएस के माध्यम से पैडिंग का उपयोग करने में परेशानी हो रही है। पैडिंग मान टेक्स्टरेरा की चौड़ाई को बदलता प्रतीत होता है, जो मैं नहीं करता बल्कि यह नहीं करता।

<div id="body"> 
    <textarea id="editor"></textarea> 
</div> 

और मेरे सीएसएस कोड:

#body { 
    height:100%; 
    width:100%; 
    display:block; 
} 

#editor { 
    height:100%; 
    width:100%; 
    display:block; 
    padding-left:350px; 
    padding-right:350px; 
} 

हालांकि, गद्दी मूल्यों के रूप में एक उम्मीद होती है काम करने के लिए प्रकट नहीं होते हैं

यह मेरा एचटीएमएल कोड है। तत्व और उसकी सामग्री की सीमाओं के बीच की जगह को परिभाषित करने के बजाय, टेक्स्टरेरा की चौड़ाई 350px द्वारा दोनों दिशाओं में बढ़ी है।

मैंने "0px ऑटो" पर मार्जिन सेट करके टेक्स्टरेरा को केंद्रित करने पर विचार किया है, लेकिन मैं चाहता हूं कि उपयोगकर्ता अभी भी टेक्स्टरेरा के माध्यम से स्क्रॉल करने में सक्षम हो, यदि माउस खाली मार्जिन में से एक पर होवर कर रहा हो। इसी कारण से मैं एक रैपर के रूप में कार्य करने के लिए एक और div नहीं जोड़ सकता, क्योंकि उपयोगकर्ता रिक्त क्षेत्रों के साथ स्क्रॉल करने में सक्षम नहीं होगा बल्कि केवल मार्जिन-कम टेक्स्टरेरा के साथ स्क्रॉल करने में सक्षम नहीं होगा।

क्या कोई मदद कर सकता है?

Answer 1

CSS box model सीमा, पैडिंग और मार्जिन को छोड़कर, सामग्री की चौड़ाई के रूप में "चौड़ाई" को परिभाषित करता है।

box-sizing: border-box; 

ऊपर के लिंक के अनुसार, अधिकांश आधुनिक ब्राउज़र (आईई सहित>:

सौभाग्य से, CSS3 के एक नए box-sizing संपत्ति आप इस व्यवहार को संशोधित करने के बजाय का उपयोग कर निर्दिष्ट चौड़ाई में गद्दी आदि शामिल करने के लिए देता है कि है = 8) इस संपत्ति का समर्थन करें, लेकिन उनके पास प्रत्येक ब्राउज़र में अलग-अलग नाम हैं।

Answer 2

सीएसएस द्वारा निर्दिष्ट चौड़ाई में पैडिंग या सीमा शामिल नहीं है (डब्ल्यू 3 सी विनिर्देशों के अनुसार)। मुझे लगता है कि ऐसा करने का एक तरीका कुछ जावास्क्रिप्ट के साथ है जो # एडिटर की चौड़ाई को #body minus 700px की चौड़ाई में सेट करता है, लेकिन यह थोड़ा गन्दा है ... सुनिश्चित नहीं है कि आप जो चाहते हैं उसे करने का सीएसएस तरीका है। बेशक, आप मार्जिन का उपयोग कर सकते हैं और उस पर काम कर सकते हैं और उस के साथ काम करें ...

Answer 3

'%' में चौड़ाई और मार्जिन/पैडिंग निर्दिष्ट करना मदद करता है। यहाँ एक उदाहरण है -

लाइव @http://jsfiddle.net/ninadpachpute/V2aaa/embedded/result

#body { 
    background-color:#ccc; 
    height:100%; 
    width:100%; 
    display:block; 
} 

textarea#editor { 
    border:none; 
    width:80%; 
    height:100%; 
    margin-left:10%; 
    margin-right:10%; 
} 

Answer 4

कुछ ब्राउज़र आप रंग आदि को बदलने के लिए प्लेसहोल्डर लक्षित करने की अनुमति है, तो आप के रूप में अच्छी गद्दी जोड़ सकते हैं:

::-webkit-input-placeholder { /* WebKit browsers */ 
    padding: 5px 0 0 5px; 
} 
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
    padding: 5px 0 0 5px; 
} 
::-moz-placeholder { /* Mozilla Firefox 19+ */ 
    padding: 5px 0 0 5px; 
} 
:-ms-input-placeholder { /* Internet Explorer 10+ */ 
    padding: 5px 0 0 5px; 
}