css 文本类型输入上方和下方的额外间距

cigdeys3 于 2023-02-26 发布在其他

关注(0)|答案(4)|浏览(121)

示例：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>

css

来源：https://stackoverflow.com/questions/13433317/extra-spacing-above-and-below-text-type-input

4条答案

按热度按时间

kpbwa7wx1#

这是因为它们是内联元素，同样的事情经常发生在图像上。
您需要做的就是将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;
}

赞(0）回复(0）举报 2023-02-26

ghg1uchk2#

设置行高：0 px;在半个块上

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

赞(0）回复(0）举报 2023-02-26

2ledvvac3#

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

input.blockheader {
    display: block;
}

问题解决了。

赞(0）回复(0）举报 2023-02-26

uwopmtnx4#

设置：
.半个街区和.第三个街区到：

line-height:0px

还可以考虑添加CSS重置选项
http://meyerweb.com/eric/tools/css/reset/

赞(0）回复(0）举报 2023-02-26

我来回答

css 文本类型输入上方和下方的额外间距

4条答案

相关问题

热门标签

最新问答