Question

正如您所见here：

#hours {
  width: 120px;
  height: 80px;
}
#button {
  width: 120px;
  height: 80px;
}

<label class="hours">
  <input value="0" min="0" id="hours" />
</label>
<label>
  <input type="submit" value="Set Alarm" id="button" />
</label>

我有两个输入标签。其中一个是type="submit"。这两个元素都被赋予height:80px，但提交按钮看起来比文本框短。

为什么会这样？

Answer 1

我认为是因为边框，您可以使用box-sizing:border-box

将其删除

#hours {
    width: 120px;
    height: 80px;
    box-sizing:border-box;
}
#button {
    width: 120px;
    height: 80px;
    line-height:0;
}

<label class="hours">
    <input type="number" value="0" min="0" id="hours" />
</label>
<label>
    <input type="submit" value="Set Alarm" id="button" />
</label>

Answer 2

尝试将此css规则添加到按钮中：

box-sizing: content-box;

在下面的代码中尝试：

＆＃13;

#hours{
    width: 120px;
    height: 80px;
}
#button {
    width: 120px;
    height: 80px;
    box-sizing: content-box;
}

＆＃13;

<label class="hours">
    <input value="0" min="0" id="hours" />
</label>
<label>
    <input type="submit" value="Set Alarm" id="button" />
</label>

＆＃13;

有关框大小调整的更多信息，请阅读here

Answer 3

这是因为提交按钮默认为box-sizing: border-box。所以在你的情况下80px height - 1px padding top - 1px padding bottom - 2px border top - 2px border bottom = 74px height。您可以通过在提交按钮上按F12或鼠标右键并在Chrome上单击检查元素来检查元素。之后转到Computed，您将看到填充，边距，边框，宽度和高度的确切尺寸。

Answer 4

        <label class="hours">
      <input value="0" min="0" id="hours" />
   </label>
      <label>
       <input type="submit" value="Set Alarm" id="button" />
           </label>

   <style>
     #hours {
           width: 120px;
           height: 80px;
           border: 1px solid;
            }
     #button{
           width: 120px;
           height: 80px;
           border: 0px none;
           margin-left: -5px;
            }
   </style>

为什么type =“submit”的输入框比给定高度短？

4 个答案: