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

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

我不确定为什么会出现这个问题，但我必须为 topbar class.

设置 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;
}

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

Why is there a white space between my button and its border?

html

css

google-chrome

height

margins

网络应用程序

片段