HTML/CSS: ऊपर और नीचे पाठ प्रकार इनपुट अतिरिक्त स्पेस

Question

लाइव उदाहरण: http://jsfiddle.net/yDQXG/

क्या मैं क्रोम में देखें: http://i.imgur.com/shLfA.png

मैं यह पता लगाने नहीं कर पा रहे हैं जहां इनपुट तत्व के आसपास रिक्ति (नीले मैदान) से आ रहा है। कोई विचार?

<form method="get"> 
<fieldset class="halfblock"> 
    <input class="blockheader" type="text" value="Field A"> 
    <textarea class="blocktext" rows="5">Line 1&#13;&#10;Line 2</textarea> 
</fieldset> 
</form> 

Answer 1

यह क्योंकि वे इनलाइन तत्व हैं है। छवियों के साथ अक्सर वही बात होती है। इसके अलावा एक जोड़ने का विकल्प पर विचार

line-height:0px 

:

input.blockheader { 
    margin: 0; 
    padding: 0; 
    text-align: center; 
    background: #ABD9E2; 
    font: 11px/11px 'Vollkorn', serif; 
    border: none; 
    width: 100%; 
    position: relative; 
    /* top: -7px; */ 

    display: block; 
} 

Answer 2

सेट लाइन-ऊंचाई: 0px; .halfblock पर

.quote_body .halfblock { 
    width: 262px; 
    border: 1px dotted 
    #333; 
    float: left; 
    margin-bottom: 15px; 
    line-height: 0px; 
} 

Answer 3

इनपुट के CSS को display टैग जोड़ें:

input.blockheader { 
    display: block; 
} 

समस्या को हल किया।

Answer 4

सेट:

.halfblock & .thirdblock को

तुम सब करने की ज़रूरत है अपने आदानों की display:block जोड़ने है

सीएसएस रीसेट

http://meyerweb.com/eric/tools/css/reset/