CSS边距权利似乎不起作用[重复]答案

【问题标题】：css margin right does not seem to work [duplicate]CSS边距权利似乎不起作用[重复]
【发布时间】：2018-02-19 07:34:37
【问题描述】：

https://jsfiddle.net/m4ewm67w/3/

我在上面制作了这个小演示，容器中项目的右边距似乎不起作用。顶部、底部和左侧边距正在工作。我想知道我是否完全错误地理解了某些概念。

我的html和css代码在这里：

<style>
div.container {
  border: 1px solid gray;
  box-sizing: border-box;
  position: relative;
  width: 100px;
  /* padding: 4px; */
}

div.item {
  height: 40px;
  width: 100%;
  border: 1px solid gray;
  box-sizing: border-box;
  margin: 5px 100px 5px 5px; 
  display: grid;
  align-content: center;
  justify-content: center;
  background-color: white;
}
</style>

<div class="container">
  <div class="item">0</div>
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

【问题讨论】：

去掉 width:100% 就可以了
@TemaniAfif 但删除 %100 会产生不良结果，但我不想在.items 中硬编码宽度。
不理想的结果是margin的值很大；）调整一下看看
阅读：w3.org/TR/CSS22/visudet.html#blockwidth
我明白了。看起来我希望让孩子们将父母推向正确的方向，但是父母已经有一个固定的宽度。谢谢！

标签： css margin

【解决方案1】：

div.item {
  height: 40px;
  width: 90px;
  border: 1px solid gray;
  box-sizing: border-box;
  margin: 5px 100px 5px 5px; 
  display: grid;
  align-content: center;
  justify-content: center;
  background-color: white;
}

试试看 ;) 问题是宽度

【讨论】：

问题不只是宽度，我想它需要更深入的解释......
如果您不想硬编码宽度，这里的解决方案是：div.item { height: 40px; width: 90%; border: 1px solid gray; box-sizing: border-box; margin: 5px 100px 5px 5px; display: grid; align-content: center; justify-content: center; background-color: white; }希望对您有所帮助。