以较少的CSS计算从百分比到像素的宽度，然后按像素减去

我将计算从百分比到像素的某个元素的宽度，因此我将使用LESS和calc（）减去-10px。有可能吗

div {
    span {
        width:calc(100% - 10px);
    }
}

我使用CSS3

calc（）

所以它不起作用：

calc（100%-10px）

示例：如果100%=500px，则宽度=490px（500-10）

我做了一个测试演示：

因此，当我调整大小时，填充会一直说：5（10px/2）

---

我可以少做一点吗？我知道如何使用jQuery和简单的CSS，比如边距填充或其他。。。但是我将尝试使用

calc（）

在LESS中执行函数，或者，您可以像这样使用margin属性：

    {
    background:#222;
    width:100%;
    height:100px;
    margin-left: 10px;
    margin-right: 10px;
    display:block;
    }

---

我认为

width:-moz计算（25%-1米）是您正在寻找的内容。
您可能希望对此进行查看，以寻求任何进一步的帮助，您可以对
calc
参数进行转义，以防止在编译时对其进行计算

使用您的示例，您只需围绕参数，如下所示：

演示：


我发现我用以下三种方式之一使用它：

基本逃逸
calc
参数中的所有内容都被定义为字符串，并且在客户端对其进行计算之前都是完全静态的：

少投入
div{
>跨度{
宽度：计算（‘100%-10px’）；
}
}

CSS输出
变量插值
您可以在字符串中插入较少的变量：

少投入
div{
>跨度{
@pad:10px；
宽度：计算（~'100%-@{pad}'）；
}
}

CSS输出
混合转义值和编译值
您可能希望转义一个百分比值，但请继续并在编译时对某些内容进行评估：

少投入
@btnWidth:40px；
div{
>跨度{
@pad:10px；
宽度：calc（~（100%-@{pad}）-（@btnWidth*2））；
}
}

CSS输出
来源：。
试试这个：

width:auto;
margin-right:50px;

OP希望宽度10px小于100%宽度。你的CSS没有做到这一点。这将使它的宽度超过100%。作为一般规则，如
div
或
span
。下面是我为在任何css属性上使用calc编写的跨浏览器混合：你太棒了，伙计！谢谢你的例子和解释。你知道我如何用更少的资源将一个容器的宽度（我们称之为div.categories）分成4个相等的部分吗？@shawnpencer：在这两行之间，有很多模糊之处。您能创建一个JSFIDLE来说明您试图解决的问题吗？我可以试着猜测用例，但我不知道全部细节，这让我感到压抑，我相信你知道这是怎么回事。你最糟糕的压抑最终会让你失去理智。我不想让自己成熟。因为我要的是一个简单的CSS解决方案，而且因为我能够使用其中一个答案使事情顺利进行，所以我现在很好。不过，感谢您提供一个JSFIDLE示例。非常感谢。
div > span {
  width: calc(100% - 10px);
}

div > span {
  width: calc(100% - 10px);
}

div > span {
  width: calc((100% - 10px) - 80px);
}

width:auto;
margin-right:50px;