为什么我的按钮和它的边框之间有一个空白？

Question

网络应用

sn-p

我在 Chrome 中遇到了按钮高度问题。它在 Firefox 中工作得很好，但是虽然我将它设置为 100%，但它并没有填满整个高度。这对我来说没有多大意义，所以有人可以向我解释一下吗？

它似乎在sn-p中工作？我 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

我不确定为什么会出现这个问题，但我必须为 topbar 类设置 min-height 属性。

.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;
}