CSS继承填充，然后减少数量

Question

我有一个类被添加到网站的各个部分以显示部分是可编辑的。该类名为 .editable

当用户登录后，当他们将鼠标悬停在此类部分上时，该部分周围会显示一个红色虚线边框。

我目前是这样做的:

.editable { /* add padding to act as clear border */
    padding:1px; 
}
.editable:hover { /* remove padding and add border */
    padding:0px; 
    border:1px dashed red 
}

如评论中所示，我添加了 1px 的填充，因此当鼠标悬停时显示边框时，该部分不会“移动”。

当要编辑的部分已经有填充时，就会出现问题。例如

.sectionToBeEdited {
    padding:10px;
}

当我添加 .editable 类时 <div class="sectionToBeEdited editable">blah</div>填充被覆盖。

问题 有没有办法继承填充设置，然后向其添加 1px？然后在悬停时将任何填充减少 1 像素。

我知道另一种方法是将可编辑部分包装在单独的 div 中并在那里应用填充，但这涉及重写和添加大量类和 div。

或者有其他方法吗？

Answer 1

CSS 只能覆盖其值，不支持数学运算。

您可以通过为您的 editable 类使用白色/透明边框而不是填充来解决您的问题。

.editable { /* change border color to something invisible */
    border:1px solid white;
}
.editable:hover { /* make border visible */
    border:1px dashed red;
}