为什么空 html 元素的行为与内容不同？ [复制]答案

【问题标题】：Why do empty html elements behave differently than ones with content? [duplicate]为什么空 html 元素的行为与内容不同？ [复制]
【发布时间】：2018-10-31 00:32:28
【问题描述】：

我想在 4 行中显示 12 个正方形 buttons，类似于数字键盘的样子。出于这个问题的目的，我将 sn-p 分解为仅 2 行。

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>

任何不想运行 sn-p 的人的结果：

如您所见，最后一行的第一个button 没有任何内容。一旦我给它一些内容，最后一行的行为与另一行相同。但是如果我把它留空，最后 2 个 button "jump" 因为它。我尝试使用divs 代替按钮，我尝试将每个按钮打包在包装器中并将样式应用于包装器，但结果始终相同。

谁能给我解释一下，这种行为是从哪里来的？我错过了什么吗？

【问题讨论】：

请注意，它在 Firefox 上的行为略有不同，“0”和“后退”放置正确，只有空按钮稍微偏离
我想这会回答你的问题：stackoverflow.com/questions/25790346/…

标签： html css

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：