css - HTML/CSS：文本类型输入上方和下方的额外间距

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

Answer 2

设置行高：0px；在 .halfblock 上

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

Answer 3

将显示标签添加到输入的 CSS：

input.blockheader {
    display: block;
}

问题解决了。

Answer 4

放：

.halfblock & .thirdblock 到：

line-height:0px

还要考虑添加 CSS 重置的选项

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