块级元素与行内元素

1、区别

image.png

1、相互转换

display:block; (字面意思表现形式设为块级元素)
display:inline; (字面意思表现形式设为行内元素)

3、inline-nlock

img input ...
1）可以设置宽高、且不默认不换行；
2）可以设置 vertical-align；
3）使用会产生元素间隙（font-size不为0的情况）

在多张 img 拼接的时候经常产生这种情况，需要设置父元素的 font-size: 0，就可以解决了

4、枚举

1）块级元素：

image.png

2）行内元素：

image.png