HTML/CSS：エクストラ間隔テキスト型入力の上および下

Question

ライブ例：私はChromeで見る何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

インライン要素であるからです。画像で同じことが頻繁に起こります。

あなたの入力にdisplay:blockを追加するだけです。また、追加のオプションを検討

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

set line-height：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へCSSリセット

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