CSS按数字增加填充

Question

我只是想知道是否有办法将对象的填充增加一个数字。例如

#mydiv{
   padding: 50px; /*padding of one div*/
}
div {
   padding: +50px; /*basically increase the padding of all divs by 50*/
 }

因此，在#mydiv上得到的填充应该变成100%。

calc()有用吗？

我知道还有其他JavaScript替代方案，但如果可能的话，我只想用纯CSS来实现。

Answer 1

你不能按照你想要的方式来做，比如获得另一个元素/class/的填充。。。并增加一些价值。但是您可以声明一个变量并使用这个变量：

:root {
  --base-padding: 50px;
}
div{
  padding: calc(var(--base-padding) + 50px);
  height: 50px;
  width: 50px;
  background-color: red;
}
#mydiv{
  padding: var(--base-padding);
  background-color: green;
}

https://jsfiddle.net/268zzwqc/1/

这不一样，但对你的情况来说应该很好。