9

现场示例: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>
4

4 回答 4

7

这是因为它们是内联元素。同样的事情经常发生在图像上。

您需要做的就是添加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;
}
于 2012-11-17T18:24:37.100 回答
6

设置行高:0px;在 .halfblock 上

.quote_body .halfblock {
    width: 262px;
    border: 1px dotted 
    #333;
    float: left;
    margin-bottom: 15px;
    line-height: 0px;
}
于 2012-11-17T18:21:49.633 回答
3

显示标签添加到输入的 CSS:

input.blockheader {
    display: block;
}

问题解决了。

于 2012-11-17T18:23:50.673 回答
0

放:

.halfblock & .thirdblock 到:

line-height:0px

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

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

于 2012-11-17T18:24:48.980 回答