Question

我在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

设置line-height：0px;在.halfblock

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

Answer 3

将display标记添加到输入的CSS：

input.blockheader {
    display: block;
}

问题解决了。

Answer 4

集：

.halfblock＆amp; .thirdblock to：

line-height:0px

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

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

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

4 个答案: