css - HTML/CSS : Extra spacing above and below text-type input

Question

实例:http://jsfiddle.net/yDQXG/

我在 Chrome 中看到的: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 添加到您的输入中:

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;
}