display: block vs inline vs inline-block

CSS display 属性

block: 此元素将显示为块级元素，此元素前后会带有换行符。
inline: 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block: 行内块元素。（CSS2.1 新增的值）

block 元素特点
①总是在新行上开始；
②高度，行高以及外边距和内边距都可控制；
③宽度缺省是它的容器的100%，除非设定一个宽度。
④它可以容纳内联元素和其他块元素

inline 元素特点
①和其他元素都在一行上；
②高，行高及外边距和内边距不可改变；
③宽度就是它的文字或图片的宽度，不可改变
④内联元素只能容纳文本或者其他内联元素

行级元素不能被应用下列属性：
width
height
max-width
max-height
min-width
min-height
如果你想改变这些属性，可以尝试使用 inline-block。

block，inline和inline-block概念和区别

inline-block是 block 和 inline 的结合体