文本输入框上下额外空白间距

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>

- JohnB

---

外部样式表会是更好的选择，因为您可以缓存它...所以页面加载速度会更快。 - NullPoiиteя

@NullPointer，我相信这只是个例子。你的评论并没有对解决方案做出贡献或帮助澄清问题。 - Mikuso

请以后只显示相关的代码。 - Bram Vanroy

@Mikuso 你的意思是什么？我评论了（第一条）我认为它可能对用户有帮助，但不是在那个答案里，而是有用的。 - NullPoiиteя

Answer 1

在.halfblock上设置line-height: 0px;。

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

- Brian

---

检查 line-height。 - CrazyTim

Answer 2

这是因为它们是内联元素。同样的问题经常出现在图像中。

你只需要在输入框中添加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;
}

- coopersita

---

只有一件事，如果你正在处理宽度问题，这对于火狐浏览器是行不通的，输入框上的display block会导致输入框溢出其容器。@KingKingFrog下面的答案对我非常有效。 - Lowtrux

Answer 3

在输入框的CSS中添加"display"标签：

请参考display标签。

input.blockheader {
    display: block;
}

问题已解决。

- Ryan Brodie

Answer 4

设置：

.halfblock 和 .thirdblock 为：

line-height:0px

同时考虑添加CSS重置的选项

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

- KingKongFrog