html - CSS calc 函数不居中

Question

我需要对宽度使用 calc 函数，但它不会划分距离。

HTML

<div class="container-card">
    <div class="container-holder"></div>
</div>

SCSS

.container-card {
    background-color: grey;
    height: 500px;
    .container-holder {
        background-color: gold;
        width: calc(100% - 14px);
        height: 300px;
    }
}

这是一个例子：

https://jsfiddle.net/fze3L0w8/

换句话说：我需要在每个宽度上与左右保持 14px 的距离。

标签： htmlcssscss-mixins

Answer 1

只需设置 14px 的边距，您将不再需要设置该width属性：

.container-card {
    background-color: grey;
    height: 500px;
    .container-holder {
      background-color: gold;
      margin: 14px;
      height: 300px;
    }
}

这是一个更新的小提琴。