Question

问题在于：

<html>
<head>
<style>
#container{
    width:500px;
    background-color:#ff0000;
    border-collapse:separate;
    border-spacing:20%;
}

#child{
    display:table-cell;
    background-color:#00ff00;
}
</style>
</head>
<body>
<div id="container">
    <div id="child">
        X
    </div>
</div>
</body>
</html>

作为jsfiddle。

问题在于border-spacing不希望将百分比作为有效参数（尝试将边框间距更改为px以查看它应该执行的操作）。为什么不？有没有办法可以获得弹性/柔软的边框间距？上下文显然是一个更为复杂的项目，其中大多数其他测量是相对定义的，因此使用这一个绝对测量意味着当窗口改变形状时，框不会保持对齐。

我知道我可以把一切都做到绝对，但是我希望事情适当地拉伸/挤压。

Answer 1

作为w3规范告知我们，它需要长度值（例如px，em等）而不是百分比。更多信息http://www.w3.org/TR/CSS2/tables.html#propdef-border-spacing

有关长度的更多信息：http://www.w3.org/TR/CSS2/syndata.html#value-def-length

有关百分比单位的更多信息：http://www.w3.org/TR/CSS2/syndata.html#percentage-units

Answer 2

如Sotiris的回答所述，百分比不起作用。但你可以通过javascript或jquery（在“onresize”上调用的函数内部完成）更改边界间距值，这可能会成为数学中的相对值。

CSS3 border-spacing属性不会进行相对测量

2 个答案: