inline-block对margin:0 auto无效

为什么inline-block元素使用margin:0 auto不起作用
再次提到上面的考点,这7大属性的值加起来必须是元素包含块的宽度,这里我们假设其他属性均为0,那也就是margin-left + width + margin-right = 包含块的宽度。
所以:

对于块级元素,当width固定后,margin就能通过margin = (包含块的宽度 - width )/2获得取值
而对于inline-block元素(包含行内替换元素比如img等),内容的宽度就是最终的宽度,没有margin-left + width + margin-right = 包含块的宽度这一限制,所以当margin被设置为auto时,它并不知道要取什么值,就默认为0了,这和为什么垂直方向上不能设置auto是一样的道理。

猜你喜欢

转载自blog.csdn.net/weixin_43906597/article/details/106848514
今日推荐