html - 无论边框宽度如何，保持元素的尺寸不变

Question

根据 this如果使用 box-sizing:border-box;，边框应该包含在元素的高度中。

在下面的示例中，我更改了 border-top 并且元素的高度已更改

无论边框宽度如何，如何保持元素的尺寸不变？

$('.title').on('click', function(){
  $(this).addClass('titleact');
});

.title{
box-sizing:border-box;
border-top: 2px solid blue;
padding:9px;
}

.titleact{
border-top:10px dashed red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='title'>lorem</div>

Answer 1

正如 GolezTrol 所说，您需要明确设置高度。或者您可以从顶部填充中提取额外的边框空间以防止内容“跳跃”(2px + 9px == 10px + 1px):

$('.title').on('click', function(){
  $(this).toggleClass('titleact');
});

.title{
  box-sizing: border-box;
  border-top: 2px solid blue;
  padding: 9px;
}

.titleact{
  border-top: 10px dashed red;
  padding-top: 1px;
}

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