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

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

在下面的示例中，我更改了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>

最佳答案

就像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>

关于html - 不论边框宽度如何，保持元素的尺寸不变，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54626586/