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

发布时间 2023-11-28 11:21:09作者: hrdom

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还是在子元素上,只是显示不符合预期。