html - 与CSS的边界独立边距？

Question

我有一种情况，悬停时边框宽度会发生变化。我正在使用 box-sizing:border-box。所以要保持内容固定 padding+border-width 必须保持不变。

如果 CSS 中有一种方法可以定义从 div 边框外部到其内容的距离，我会感到很困惑？

请参见下面的示例。我只想在 .foo:hover 中设置边框宽度而不是填充。

.button {
  height: 50px;
  padding: 10px;
  box-sizing: border-box;
}

.foo {
  border: 1px solid black;
}

.foo:hover {
  border-width: 5px;
}

/* find a way to remove this */
.button.foo:hover {
  padding: 6px; 
}

<div class='button foo'>
hello
</div>

问题的背景：我想定义多种样式（foo），其中包括边框宽度。组件（按钮）应描述尺寸，例如边距。但是组件可能会改变样式（具有不同的边框宽度）。所以我更喜欢组件大小与样式无关。

标签： htmlcss