给输入元素添加一个值会导致它垂直移动(Adding a value to an input element is causing it to shift vertically)

我创建了5个按钮，如下所示：

.button {
  background-color: red;
  transition: all .2s ease-in-out;
  margin-left: 10px;
  width: 110px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid #cfdcec;
  box-shadow: 0 0 3px gray;
} 
  
<input type="submit" class="button" disabled value="1" name="example"> 
  
 
 
 现在问题是，当我把一个值(Value="1") ，按钮高于没有值的按钮(Value="") ，这里是一个例子 
 
  
 
 注意：我使用Firefox试过，并且工作正常。 
I created 5 buttons inline, something like this :
 
 
 
  
  
.button {
  background-color: red;
  transition: all .2s ease-in-out;
  margin-left: 10px;
  width: 110px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid #cfdcec;
  box-shadow: 0 0 3px gray;
} 
  
<input type="submit" class="button" disabled value="1" name="example"> 
  
 
 
Now the problem is that when I put a value (Value="1"), the button is higher than the buttons with no value (Value=""), here is an example
 
 
Note : I tried it with Firefox and this is working fine.
                
最满意答案
                
                    
                        
 这是一个垂直对齐问题。 
 
 内联级元素（如input ， img和textarea ）受vertical-align属性的限制，其默认值为baseline 。 
 
 在这种情况下，当您向输入添加文本时，基线会发生变化，并且元素向下移动，以便跨线保留基线对齐。 
 
 用vertical-align: top或其他值覆盖默认值，问题就解决了。 
 
 
 
  
  
.button {
  background-color: red;
  transition: all .2s ease-in-out;
  margin-left: 10px;
  width: 110px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid #cfdcec;
  box-shadow: 0 0 3px gray;
  vertical-align: top;     /* NEW */
  color: white;            /* for demo only */
} 
  
<input type="submit" class="button" disabled value="" name="example">
<input type="submit" class="button" disabled value="" name="example">
<input type="submit" class="button" disabled value="1" name="example">
<input type="submit" class="button" disabled value="1" name="example"> 
  
 
 
 MDN上的更多详细信息： https ： //developer.mozilla.org/en-US/docs/Web/CSS/vertical-align 
This is a vertical alignment issue.
 
Inline-level elements, such as input, img and textarea, are subject to the vertical-align property, who's default value is baseline.
 
In this case, when you add text to the input, the baseline shifts, and the element moves down so that baseline alignment is preserved across the line.
 
Override the default with vertical-align: top, or another value, and the problem is solved.
 
 
 
  
  
.button {
  background-color: red;
  transition: all .2s ease-in-out;
  margin-left: 10px;
  width: 110px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid #cfdcec;
  box-shadow: 0 0 3px gray;
  vertical-align: top;     /* NEW */
  color: white;            /* for demo only */
} 
  
<input type="submit" class="button" disabled value="" name="example">
<input type="submit" class="button" disabled value="" name="example">
<input type="submit" class="button" disabled value="1" name="example">
<input type="submit" class="button" disabled value="1" name="example"> 
  
 
 
More details at MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align