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

发布时间：2020-12-14 16:29:38 所属栏目：资源来源：网络整理

导读：实例： http://jsfiddle.net/yDQXG/ 我在Chrome中看到的内容：http://i.imgur.com/shLfA.png 我似乎无法弄清楚输入元素(蓝色字段)周围的间距来自何处.有任何想法吗？ form method="get"fieldset class="halfblock" input class="blockheader" type="text" va

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

解决方法

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

您需要做的就是在输入中添加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;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!