浏览器渲染的宽度和高度与指定的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上有border。

如果这不能解决问题，可能是因为box-sizing: border-box

有必要使用display: flex;？