Question

所以我注意到，当您在CSS中更改字体系列时，它会更改表单字段之间的垂直间距。我想知道CSS中是否有一种方法可以删除一些间距以使表单更紧凑。使用以下命令可以增加间距：

input { margin-bottom: 10px; }

我想减小间距，即等同于以下内容：

input { margin-bottom: -10px; }

，但不执行0px以下的操作。一般而言，我对CSS和Web开发有点陌生，所以任何提示都将不胜感激。

Answer 1

实际上，我能够在Firefox中复制您的问题（Chrome无法显示相同的问题）。它似乎仅在某些类型的字体上发生，并且仅在将输入容器设置为显示块时才发生。解决此问题的一种方法是将输入容器设置为display：flex，并将flex-direction设置为column。请参阅下面显示上述内容的代码段。

.testsection2{
    display: block;
    background-color: greenyellow;
}
.testsection3{
    display: flex;
    flex-direction: column;
     background-color: aqua;
}

.testsection2>input{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
}
.testsection3>input{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
}
section{
    margin-top: 20px;
    border: solid 2px black;
  
}

<section class="testsection2">
        <h3>Container: Display Block</h3>
       <p>Notice the margin variance (although slight) between inputs when they start stacking. Confirmed in firefox, not chrome though. </p>
        <input type="text" class="testinput" value="Some Text">
        <input type="text" class="testinput" value="Some Text">
        <input type="text" class="testinput" value="Some Text">
        <input type="text" class="testinput" value="Some Text">
        <input type="text" class="testinput" value="Some Text">
        <input type="text" class="testinput" value="Some Text">
        <input type="text" class="testinput" value="Some Text">
        <input type="text" class="testinput" value="Some Text">
        <input type="text" class="testinput" value="Some Text">
        <input type="text" class="testinput" value="Some Text">
        <input type="text" class="testinput" value="Some Text">
        <input type="text" class="testinput" value="Some Text">
        <input type="text" class="testinput" value="Some Text">
        <input type="text" class="testinput" value="Some Text">
        <input type="text" class="testinput" value="Some Text">
        <input type="text" class="testinput" value="Some Text">
    </section>

    <section class="testsection3">
        <h3>Container: Display Flex, Direction Column</h3>
        <input type="text" class="testinput" value="Some Text">
        <input type="text" class="testinput" value="Some Text">
        <input type="text" class="testinput" value="Some Text">
        <input type="text" class="testinput" value="Some Text">
        <input type="text" class="testinput" value="Some Text">
    </section>

Answer 2

您可以将输入设置为display：block; 最好是在输入周围加上div。

如何删除表单字段之间的垂直间距？

2 个答案: