css - 为什么应用负 margin 权不起作用？

Question

我的代码:

.container {
    width: 100px;
    margin: 0 auto;
    padding: 0 10px;
    background: red;
}

/* this is inside the container */
.inside {
    width: 100%;
    height: 100px;
    background: blue;
    margin: 0 -10px;
}

outcome
expected outcome

我究竟做错了什么？我见过 Bootstrap 网格做类似的事情。

快速更新。抱歉解释不当。进一步解释:
边距:0 -10px；用于向左侧和右侧添加边距，但右侧不执行任何操作。

Answer 1

对于.inside，width: 100% 只覆盖.container 内边距的空间。您需要将额外的 20px 添加回其宽度:

.container {
  width: 100px;
  margin: 0 auto;
  padding: 0 10px;
  background: red;
}


/* this is inside the container */

.inside {
  width: calc(100% + 20px);
  height: 100px;
  background: blue;
  margin: 0 -10px;
}

<div class='container'>
  <div class='inside'></div>
</div>