行内元素和块级元素

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

常见的行内元素: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.包含关系

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


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容