块级元素、行内元素和块级行内元素之间的区别

html元素中大多数是块级元素和行内元素，块级行内元素需要额外设置 display:inline-block 才可以实现。

这三种元素可以通过display属性来相互转化。

块级元素

代表元素是div，常见的块级元素有p,nav,header,footer

特点

1. 块级元素独占一行
2. 浏览器会在块级元素前后各起一个新行,多个块级元素会以上下方向排列显示
3. 可以设置宽高,margin和padding各个方向上都会生效

块级元素对应的CSS属性是display:block，通过设置这个可以将非块级元素设置成块级元素。

行内元素

代表元素是span，常见的行内元素是a,button,input

特点

1. 行内元素的大小只根据其中的内容多少来定，无法设置其宽高，即设置width和height无效
2. 多个行内元素会左右并排显示，浏览器并没有在行内元素前后另起新行
3. 行内元素设置margin时之后左右两个方向生效，padding四个方向都生效，但是上下方向的padding无法撑起父元素，对背景颜色有作用

行内元素对应的CSS属性是display:inline，通过设置这个属性可以将非行内元素设置成行内元素

块级行内元素

这种元素综合了块级元素和行内元素的一些特点，用来解决一些其他两种元素不好解决的问题。比如横向导航栏，多个元素需要设置宽高，而且需要左右排列。

通过设置CSS属性display:inline-block来将元素设置成块级行内元素。

特点

1. 元素前后不另起一行，多元素左右排列，不换行。
2. 可以设置宽高，而且margin和padding都是四个方向都生效

参考资料

HTML行内元素、块状元素、行内块状元素的区别