Question

我正在尝试将元素的边距设置为自动值（我希望保持居中）加上特定数量的像素，但calc(auto + 20px)似乎不起作用。这是我的代码：

#game {
    border: 5px groove orange;
    padding-left: 0px;
    padding-right: 0px;
    width: 400px;
    height: 400px;
    margin-left: calc(auto + 20px);
    margin-right: calc(auto + 20px);
    display: block;
}

这种方法还有其他选择吗？

Answer 1

您可以通过添加其他容器来实现。

.container {
  text-align: center;
  background: pink;
}

.inner {
  display: inline-block;
  margin-left: 20px;
  margin-right: 20px;
  background: aqua;
}

<div class="container">
  |<div class="inner">Hello world</div>|
</div>

Answer 2

因此，在我们的理解中，你有一个外部div（让它成为游戏容器的id）和一个内部div（带有id游戏）。内部div居中，你希望外部div比内部div大一点，这意味着它现在粘在它的边界上。正如Abhitalks建议的那样，您可以轻松地向外部元素添加填充并实现此目的。

#game {
    border: 5px groove orange;
    width: 400px;
    height: 400px;
    display: inline-block;
    background-color: blue; /*for demo*/
}

#game-container{
    padding-left:20px;
    padding-right:20px;
    text-align: center;
    background-color: green; /*for demo*/
}

  <div id='game-container'>
    <div id='game'>
      <h1>Sprite</h1>
    </div>
  </div>

如果你的外部div中还有其他元素，你可以在游戏中添加另一个新div并将其CSS应用为游戏容器。

希望这有帮助！

如何使元素具有一定的固定余量？

2 个答案: