html - 为什么 中的 元素在宽度上丢失了几个像素？

Question

我正在为网站创建一个响应式菜单，但我遇到了一个问题:在定义 的 100% 宽度时，a 标签(红色) 丢失了几个像素div(蓝色)。

要注意差异，需要打开 Pen 的链接，使用 Chrome 检查器并选择红色框。宽度以小于 30 的像素显示(例如:28.72、27.60 等)。

虽然结果是一样的，但我已经尝试了其他 HTML 标签。为什么会发生这种情况，请问标签的宽度和高度保持在 30px 的最佳解决方案是什么？

这里是笔:https://codepen.io/Jnico/pen/RQaEoa

body {
  padding: 0;
  margin: 0;
}

.menu__container {
  width: 100%;
  background: black;
  padding: 0 5px;
}

.menu {
  width: 100%;
  max-width: 1024px;
  height: 55px;
  margin: auto;
  display: flex;
  align-items: center;
}

.logo {
  width: 30px;
  height: 30px;
  background: red;
  display: inline-block;
}

.menu__buttons {
  width: 100%;
  background: blue;
  margin-left: 15px;
  display: flex;
  justify-content: space-between;
}

.button {
  padding: 6px 20px;
  border: 1px solid #FFFFFF;
}

<nav class="menu__container">
  <div class="menu">
    <a class="logo"></a>
    <div class="menu__buttons">
      <a class="button">Button 1</a>
      <a class="button">Button 2</a>
    </div>
  </div>
</nav>

Answer 1

因为 flexbox..

将 flex: 0 0 auto 添加到您的 .logo 中，因此它根本不会 flex ，应该没问题；) 此外，您不需要 display:inline-block 那里，因为它已经是一个 flex-item。

  .logo {
    width: 30px;
    height: 30px;
    background: red;
    flex:0 0 auto;
  }