display:inline、block和inline-block的区别

inline：使元素变成行内元素（内联），拥有行内元素的特性，即

1. 与其他行内元素共享一行

2. 不能修改width、height属性，大小由内容撑开

3. padding属性 top、right、botto、left设置都有效；margin属性只有left、right设置有效

block： 使元素变成块级元素，拥有块级的特性，即

1. 独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度

2. 可以修改width、height属性

3. padding、margin四个方向的值设置均有效

inline-block： 使元素变成行内块级元素，结合了行内元素和块级元素的特性（不独占一行的块级元素），即

1. 与其他行内元素共享一行

2. 可以修改width、height属性

3. padding、margin四个方向的值设置均有效

注意：当多个inline-block的元素写在一起时，是否换行效果不同（换行后两者中间会有间距），如img、button标签，这也是代码经过压缩后效果与开发版本不同的原因之一，解决方案是去除换行

作者：LesterWeng
来源：CSDN
原文：https://blog.csdn.net/qq_33576343/article/details/81744887
版权声明：本文为博主原创文章，转载请附上博文链接！