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

1. display:inline

• inline元素不会另起一行,和其他元素都在一行上,只有当元素内容一行显示不下时才会另起一行.

• 当span元素设置为inline时,宽高设置是无效的,即 width: xx;height;xx;无效

• margin-top和margin-bottom无效,设置行高无效
• 一个inline元素中不能再包含block元素,只能包含inline元素,但并不是所有inline元素.比如一个span中你不能再放一个div元素,否则IDE会给出提示.
• <span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

2. display:block

• 总是会另起一行.
• <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。
• 高度，行高以及顶、底边距都可以控制；
• -块级元素通常作为其他元素的容器，可以容纳内联元素和其他块元素。但要视具体元素情况而定.比如 p元素中不能放入div元素.

3.display: inline-block

• 显示效果表现为inline类型,也就是不换行,但是可以设置宽高属性.比如span设置为inline-block类型时,宽高属性开始生效,但是显示时并不会另起一行.

参考文章:
display：inline、block、inline-block 的区别
display:inline、block、inline-block的区别
block 和 inline 的区别是什么