margin穿透/传递/合并/折叠 多层 爷孙 祖孙

https://codepen.io/rhdom/pen/vYbarpm

如这个代码所示

<div class="show">
  <div>
    <h2>crystal</h2>
  </div>
</div>

 

<div data-v-3151e59a="" class="form-widget-list">
  <div data-v-6f598f02="" data-v-97099720="" data-v-3151e59a="" class="field-wrapper design-time-bottom-margin">
    <div data-v-6f598f02="" class="el-form-item el-form-item--medium label-right-align"></div>
  </div>
</div>

 

每层都是只有一个元素，这样，可以一直向上穿透/传递/合并/折叠。

 

比较有迷惑性的地方是，父元素的margin值（在devtools elements面板中）实际上并没有变化。

父元素偏移，但并不是会把这个值设置给父元素，在元素检查的时候父元素的margin并没有改变，margin还是在子元素上，只是显示不符合预期。