html - 边距在 flexbox 内不起作用以将 child 带到 parent 之外

Question

我有一个文本编辑器，其中有一个图像工具，它有一个插入功能，可以在左侧和右侧添加边距，但如果您想将图像移到父容器之外，则只有左边距有效，但右边距只是停在边缘容器

.draft-bg {
  padding-top: 10px;
  padding-bottom: 1px;
}

.image-parent-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin: 0rem;
}

.image-parent {
  width: 778px;
  height: auto;
  margin-top: 0px;
  margin-bottom: 0px;
}

img {
  width: 100%;
  height: auto;
  margin-right: 1000px;
  margin-left: 0px;
}

<div class="draft-bg">
  <div class="image-parent-container">
    <div class="image-parent">
      <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" />
    </div>
  </div>
</div>

Answer 1

来自 the specification :

the values are said to be "over-constrained" and one of the used values will have to be different from its computed value. If the 'direction' property of the containing block has the value 'ltr', the specified value of 'margin-right' is ignored and the value is calculated so as to make the equality true. If the value of 'direction' is 'rtl', this happens to 'margin-left' instead.

因此，在您的情况下，大边距正在创建“过度约束”部分，因此它将被忽略。您还可以看到这取决于方向。
如果您将方向更改为 rtl这不会发生，您的元素将超出其父容器:

.draft-bg {
  padding-top: 10px;
  padding-bottom: 1px;
}

.image-parent-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin: 0rem;
}

.image-parent {
  width: 778px;
  height: auto;
  margin-top: 0px;
  margin-bottom: 0px;
  direction:rtl;
}

img {
  width: 100%;
  height: auto;
  margin-right: 1000px;
  margin-left: 0px;
}

<div class="draft-bg">
  <div class="image-parent-container">
    <div class="image-parent">
      <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" />
    </div>
  </div>
</div>