height() 返回一个低于实际高度的值 [重复]答案

【问题标题】：height() returns a value that is lower than the actual height [duplicate]height() 返回一个低于实际高度的值 [重复]
【发布时间】：2021-10-08 17:08:39
【问题描述】：

我有以下标记：

<div class="accordion__feature accordion__feature--1">
  <span class="accordion__label display--1">Dashboard</span>
</div>

在检查.accordion__feature--1 时，它的高度为62px。但是当运行console.log 时，它给了我-32 的值。

我读过this similar question，其中提到了min-height 正在设置。但是，我没有设置任何 min-height，所以不确定发生了什么？

演示：

$(document).ready(function() {
  var height = $('.accordion__feature--1').height();
  console.log(height);
});

.accordion__feature {
  border: 1px solid;
  padding: 15px 0px;
  display: flex;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="accordion__feature accordion__feature--1">
  <span class="accordion__label">Dashboard</span>
</div>

在上面的演示中，实际高度是50px，但它正在注销18。就算是padding问题，也应该只有30px的差距吧？

【问题讨论】：

“即使是内边距问题，也应该只有 30px 的差异？” - 加上上下 1px 的边框……

标签： javascript html jquery css

【解决方案1】：

将height() 更改为outerHeight()

var height = $('.accordion__feature--1').outerHeight();

$(document).ready(function() {
  var height = $('.accordion__feature--1').outerHeight();
  console.log(height);
});

.accordion__feature {
  border: 1px solid;
  padding: 15px 0px;
  display: flex;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="accordion__feature accordion__feature--1">
  <span class="accordion__label">Dashboard</span>
</div>

【讨论】：