html - 浏览器呈现的宽度和高度与指定的 css 不同？

Question

在我的 html 页面中，我有 header 和 leftpane 作为 div。 hedaer 的高度是116px，leftpane 的宽度是181px。当我使用 chrome-developer-tool 检查我的页面时，它显示高度和宽度分别为 98.36px 和 165.41px 而不是原来指定的在 CSS 中。

下图显示了高度的问题

下图显示了宽度问题。

这是相关的CSS

.dashboard-header {
  background: #000000;
  height: 116px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}
.dashboard-leftpane {
  width: 181px;
  background: #000000;
  height: 100%;
}

对应的html代码

  <div class="input-search">
    <img class="imgage-search" src="search.svg" alt="Grace Logo">
    <input type="text" name="" value="" placeholder="" style="border:none; background: #FAFAFA; flex-grow: 2;">
    <img class="imgage-search" src="filter.svg" alt="">
  </div>


  <div class="profile-menu">
    <span class="profile-menu-name">USER</span>
    <img src="arrow_drop_down.svg" alt="">
  </div>

<div class="dashboard-leftpane">

    <div class="giraffe-list">
      <div class="giraffe-list-item">
          <span class="giraffe-item-name">ITEM1</span>
      </div>

      <div class="giraffe-list-item">
          <span class="giraffe-item-name">ITEM2</span>
      </div>

      <div class="giraffe-list-item">
          <span class="giraffe-item-name">ITEM3</span>
      </div>

      <div class="giraffe-list-item">
          <span class="giraffe-item-name">ITEM4</span>
      </div>

      <div class="giraffe-list-item">
          <span class="giraffe-item-name">ITEM5</span>
      </div>
    </div>

</div>

Answer 1

好吧，不知道这是否可行，但请确保您的 div 上有 box-sizing: border-box。

如果这不能解决问题，可能是因为 display: flex;

有必要使用display: flex;吗？