CSS中block和inline的区别

总体概念

1、block 块级元素，独立一块，会换行
inline 内联元素，前后不会换行，一系列内联元素在一行显示，直到排满
2、常见的块级元素：div,p,table,h1~h6,ul,li,ol
常见的内联元素：span ,img ,input ,lable,select,a
3、block可以包含block,inline，inline只能包含inline.注：P元素只能包含inline不能包含block

细节对比

block:
1、默认情况下，block宽度会填满父容器的宽度。
2、block可以设置高宽。
3、block可以设置padding,margin
inline:
1、多个相邻的行内元素排在一行，直到一列排不下才会换行，其宽度随元素的内容而变化。
2、inline设置高宽无效。
3、inline元素水平方向的padding,margin产生边距效果，竖直方向不会产生边距效果。
inline-block
将对象呈现为inline对象，但是对象的内容作为bloack对象呈现。以后的内联对象会排列在同一行。