Textarea के तहत अतिरिक्त स्थान, ब्राउज़रों के साथ अलग है


85

वहाँ textarea टैग के तहत कुछ अतिरिक्त स्थान है। विभिन्न ब्राउज़रों में 1 से 4 पिक्सेल तक। मार्कअप बहुत सरल है:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
    <head>
        <style>
            body {
                margin: 0;
                padding: 0;
            }
            .main {
                background-color: red;
            }
            textarea {
                background-color: gray;
                resize: none;
                margin: 0;
                border: 0 none;
                padding: 10px;
                height: 50px;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <textarea></textarea>
        </div>
    </body>
</html>

यहां बताया गया है कि यह ब्राउज़रों में कैसे प्रस्तुत किया जाता है:

स्क्रीनशॉट

ये क्यों हो रहा है? इस अतिरिक्त स्थान को कैसे निकालें?

जवाबों:


210

जोड़े vertical-align: topको textarea

अंतर का कारण यह है कि textareaएक inline(या inline-block) तत्व है, और अंतराल पाठ में अवरोही के लिए आरक्षित स्थान है । मुझे ठीक से पता नहीं है कि विभिन्न ब्राउज़रों के बीच अंतर क्यों है।


17

मेरे मामले में, माता-पिता की निचली सीमा के साथ तीसवाँ उत्तर अच्छा काम नहीं करता था <div>

display: block हालांकि मुझे अच्छी तरह से अनुकूल है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.