У меня есть случай, когда ширина границы изменяется при зависании. Я использую box-sizing: border-box. Таким образом, чтобы сохранить содержимое фиксированным, отступы + border-width должны быть постоянными.
Интересно, есть ли способ в CSS определить расстояние от границы раздела до его содержимого?
См. Пример ниже. Я хотел бы установить ширину границы только в .foo: hover, а не в padding.
.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), которые включают в себя border-width. Компонент (кнопка) должен описывать размер, такой как поле. Но компонент может изменить стили (с различной шириной границы). Поэтому я предпочитаю, чтобы размер компонента не зависел от стиля.