什么是落后的margin-top的理由:汽车和边距:汽车总计0保证金?(What is the ra

2019-06-28 05:57发布

由于margin-right: automargin-left: auto中心的元素水平,我希望他们的垂直同行以同样的方式行事。

然而,我明白,这不会发生,因为每个CSS规范:

10.6.2内联替换元素,块级代替在正常流动的元件,“内联块”替换在正常流动元件和浮置替换元素

如果“边距”或“边距”是“自动”,其使用值是0。

也适用于块的元素:

10.6.3块级“溢出”时在正常流动的非替换元素计算为“可见”

这部分也适用“溢出”不计算到“可见的”当但已被传播到视块级非替换元件在正常流动。

如果“边距”或“边距”是“自动”,其使用值是0。

现在我想知道,这背后是决策/行为的理由。

我正在寻找的理解和信念。 我不认为一个含糊的解释会做到这一点,还没有任何贡献是值得欢迎的。

Answer 1:

如上文所述:

啊哈......这不是那么晦涩难懂! 我可以看到它是有用的。 感谢您的例子,你给上的jsfiddle。

因此,如果一个元素绝对定位相对于父元素,同时使用topbottom ,但它的height定义,是小于父元素减去的高度, topbottom偏移量,那么margin属性将用于以确定它相对于母体,和垂直取向margin:auto将导致垂直居中元件。

诚然,这听起来很复杂,但它是在明确的jsfiddle 。

例如,该CSS:

.inner { 
  position:absolute; 
  top:0; bottom: 20px; left:0; right:0px;
  padding:0; border:0;
  margin:auto;
  height:20px; width:50px;
}

而这个HTML:

<div class=outer>
    <div class=inner>Text</div>
</div>    


文章来源: What is the rationale behind margin-top: auto and margin-bottom: auto amounting to 0 margin?