Question

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

我希望将它的填充减少1。

类似的东西：

#myElement{
 currentpadding+1px;
}

我还没有找到这种跨浏览器的方法而不使用javascript。我只需要使用CSS。

Answer 1

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

＆＃13;

.box {
  box-sizing: border-box;
  padding: 5px;
}

.box span {
  display: inline-block;
  width: 100%;
  height: 10px;
  background-color: blue;
}

#myElement {
  border: 5px solid transparent;
}

＆＃13;

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

＆＃13;

Answer 2

不能单独使用CSS。但是，如果不使用它们，则会有两个替代属性：

border-left: 1px solid transparent;
/* or... */
margin-left: 1px;

通常情况下，您应该始终考虑所有三种替代方案border，margin和border来定位内容，因为在单个元素上需要所有这些内容是非常罕见的。

然而，（适当的）替代方案是JavaScript。阅读当前属性，添加1并将其设置回来：

香草：

let myElement = document.querySelector('#myElement');
myElement.style.paddingLeft = (parseInt(window.getComputedStyle(myElement, null).getPropertyValue('padding-left')) + 1) + 'px';

jQuery的：

let paddingLeft = parseInt($('#myElement').css('padding-left'));
$('#myElement').css({paddingLeft:(paddingLeft + 1) + 'px'});

另一个可能的解决方案是将元素包装在一个新元素中，如果DOM结构中的这个更改不影响其他任何东西（想想CSS选择器等等）：

$('#myElement').wrap($('<div />', {style:'padding-left:1px;'}));

仅在CSS中将元素的填充增加1而不知道当前

2 个答案: