display: block和display: inline的区别

display:block

1.处于常规流中,width没有设置会自动填满父容器
2.margin,pading生效
3.高度没有设置的情况下,会被处于常规流中的子元素撑开
4.vertical-align无效

display:inline

1.margin、padding在竖直方向无效,水平方向有效
2.width、height对display:inline元素无效,对于inline-block元素有效,常见的inline-block有img、input
3.white-space,vertical-align有效
4.行框高由line-height决定
6.浮动,绝对定位会使得元素自动变成块状元素

猜你喜欢

转载自blog.csdn.net/csdn_zcq/article/details/86689851