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

Question

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

input { margin-bottom: 10px; }

我想减少间距，即等同于以下内容:

input { margin-bottom: -10px; }

除了它不会在 0px 以下做任何事情。总的来说，我对 CSS 和 Web 开发有点陌生，所以任何提示都将不胜感激。

Answer 1

我实际上能够在 Firefox 中复制您的问题(chrome 没有展示相同的问题)。它似乎只发生在某些类型的字体上，并且只发生在输入容器设置为显示 block 时。解决此问题的一种方法是将输入容器设置为 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>