行内元素(inline)和块级元素(block)都是display属性的值。要知道行内元素和块级元素的区别,首先要了解他们的特性。
行内元素的特性:“行内”,顾名思义,在一行之内,所以相邻的行内元素在同一行,当他们宽度超过了容器的宽度才会自动换行。行内元素的宽度、高度、内边距的 top/bottom和外边距的top/bottom都是不可改变的,但 padding 和 margin 的 left 和 right 是可以设置的。常见的行内元素有:span、a、br。。。
块级元素的特性:总是独占一行,表现为另起一行开始,即其后的元素也必须另起一行显示,他们的宽度、高度、内边距和外边距都可控制。常见的块级元素有:table、form、ul li。。。
行内块元素(inline-block):即融合了行内元素和块级元素的特性,即在一行显示,又能设置宽高。常见的行内块元素有:img、input、button。。。
这些元素之间是可以通过设置display属性来进行转换的。
扩展学习
https://segmentfault.com/a/1190000009636727