为什么我的按钮与其边框之间有空白？

Question

网络应用

摘要

我在Chrome中的按钮高度遇到问题。它可以在Firefox中正常工作，但是尽管我将其设置为100％，但它不能完全填充整个高度。对我来说没有太大意义，所以有人可以向我解释一下吗？

似乎在摘要中起作用？我100％不使用JavaScript来设置任何一个：纯粹是我在下面列出的CSS。

直到今天这都不是问题...这太奇怪了。

body {
 background-color: dimgrey;
 margin: 0;
 padding: 0;
}
.topbar {
  border-radius: 0px;
  border-bottom: 1px lightgrey solid;
  margin-bottom: 0px;
  background-color: white;
  max-width: calc(80%-1px);
  height: 60px;
  max-height: 60px;
  text-align: right;
  display: flex;
}
.login-button {
  max-width: 15%;
  min-width: 15%;
  background-color: tomato;
  border: none;
  border-left: 1px lightgrey solid;
  login_text: 'color';
  color: white;
  outline: none;
  cursor: pointer;
  font-size: 30px;
  height: 100%;
}
.e-mess {
  width: 85%;
  height: 100%;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class='topbar'>
  <div class='e-mess'></div>
  <button class='login-button'>login</button>
</div>

Answer 1

我不确定为什么会导致此问题，但是我必须为min-height类设置topbar属性。

.topbar {
  border-radius: 0px;
  border-bottom: 1px lightgrey solid;
  margin-bottom: 0px;
  background-color: white;
  max-width: calc(80%-1px);
  min-height: 60px;
  height: 60px;
  max-height: 60px;
  text-align: right;
  display: flex;
}