为什么空的html元素的行为与包含内容的html元素不同？

Question

我想在4行中显示12个正方形button，类似于小键盘的外观。出于这个问题的目的，我仅将代码片段分为两行。

button {
  height: 64px;
  width: 64px;
  margin: 4px;
  background-color: grey;
}

<div>
  <button>1</button>
  <button>2</button>
  <button>3</button>
</div>

<div>
  <button></button>
  <button>0</button>
  <button>back</button>
</div>

不想运行摘要的任何人的结果：

如您所见，最后一行的第一个button没有任何内容。我给它一些内容后，最后一行的行为与另一行相同。但是，如果我将其留空，则最后2个button会因此而“跳转”。我尝试使用div代替按钮，尝试将每个按钮包装在包装器中，然后将样式应用于包装器，但是结果始终相同。

有人可以向我解释这种行为的来源吗？我想念什么吗？

Answer 1

因为默认情况下，button元素在其baseline处垂直对齐，该vertical-align: top;是文本的最后一行，或者（如果没有内容的话）下边框（如图像中的图片）。

您可以通过添加button { height: 64px; width: 64px; margin: 4px; background-color: grey; vertical-align: top; }或任何其他垂直对齐设置来避免这种情况。

<div>
  <button>1</button>
  <button>2</button>
  <button>3</button>
</div>

<div>
  <button></button>
  <button>0</button>
  <button>back</button>
</div>

function OnGetRowValues(values) {
  //Set hidden value
  $('#<%=hdnClientID.ClientID%>').val(values[0]);

  //Fire button click
  btnPopulateGrids_Click();

  //If you change your HiddenField to have OnValueChange event, you can trigger it with this
  //__doPostBack('<%= CompanyCode.ClientID %>', '');        
}

Answer 2

您需要将容器div display的属性设置为flex

https://www.w3schools.com/css/css3_flexbox.asp

button {
  height: 64px;
  width: 64px;
  margin: 4px;
  background-color: grey;
}

div{
  display: flex
}

<div>
  <button>1</button>
  <button>2</button>
  <button>3</button>
</div>

<div>
  <button></button>
  <button>0</button>
  <button>back</button>
</div>