CSS：不同元素margin的计算
关于什么元素的分类可以看我这篇文章 CSS:关于元素高度与宽度的讨论 系列文章（二）
行内级元素
-
Inline，非置换元素:如果margin值为auto，则
margin-left和margin-right的计算值也就为0 -
Inline,置换元素:同上
-
Inline-block,置换元素在文档流中:同上
-
Inline-block,非置换元素在文档流中:同上
块级元素
块级非置换元素，在文档流中
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block 下面的情况下，如果margin值为auto
-
如果width是auto值，那么其他值是auto的值就为0
-
如果
margin-left和margin-right的值为auto，使用的值相等，那么就相对于包含块水平居中。
块级置换元素，在文档流中
同块级非置换元素一样。
总结
-
行内级置换元素和非置换元素，在margin值为
auto时，margin-left和margin-auto的计算值都为0。 -
块级置换元素和非置换元素:
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
-
如果width是auto值，那么其他值是auto的值就为0
-
如果
margin-left和margin-right的值为auto，使用的值相等，那么就相对于包含块水平居中。
正文到此结束
热门推荐
相关文章
近期评论
-
666
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
