行内元素和块级元素

行内元素和块级元素的区别

常见的行内元素：span、strong、em

常见的块级元素：div、p、form、ul、ol、li

1. 直观区别

 行内元素

不会独占一行，相邻行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化。

块级元素

独占一行，默认情况下，其宽度自动填满其父元素宽度。垂直方向排列，块级元素从新行开始结束接着一个断行

2. 属性区别

行内元素

不能设置width、height；

垂直方向上padding-top、padding-bottom、margin-top、margin-bottom不产生效果；

水平方向上padding-left、padding-right、margin-left、margin-right产生效果

块级元素：可以设置width、height、padding、margin。

3.对应display属性

行内元素    

display：inline

display:block 变成块级元素

块级元素 

display: block; 

display:inline变成行内元素

4.包含关系

块级元素可以包含行内元素，行内元素不能包含块级元素。

---