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/

它不一样，但应该适合您的情况。

CSS按数量增加填充

1 个答案: