html - 仅在不知道当前元素的情况下在 CSS 中将元素的填充增加 1

Question

我有一个带有特定填充的元素，我无法控制也无法预先确定它的填充。 它设置在我无法控制的不同 css 文件中，该文件是动态生成的，并为元素提供随机填充值。

我想将它的填充减少 1。

像这样:

#myElement{
 currentpadding+1px;
}

我还没有找到不使用 javascript 来处理这个跨浏览器的方法。 我只需要使用 CSS。

Answer 1

首先添加 box-sizing: border-box; 然后应用所需宽度的边框:

.box {
  box-sizing: border-box;
  padding: 5px;
}

.box span {
  display: inline-block;
  width: 100%;
  height: 10px;
  background-color: blue;
}

#myElement {
  border: 5px solid transparent;
}

<div id="myElement" class="box"><span></span></div>
<div class="box"><span></span></div>