css——行内元素和块级元素的具体区别与行内块元素

（学习笔记）

行内元素（inline）和块级元素（block）都是display属性的值。要知道行内元素和块级元素的区别，首先要了解他们的特性。

行内元素的特性：“行内”，顾名思义，在一行之内，所以相邻的行内元素在同一行，当他们宽度超过了容器的宽度才会自动换行。行内元素的宽度、高度、内边距的 top/bottom和外边距的top/bottom都是不可改变的，但 padding 和 margin 的 left 和 right 是可以设置的。常见的行内元素有：span、a、br。。。

 

块级元素的特性：总是独占一行，表现为另起一行开始，即其后的元素也必须另起一行显示，他们的宽度、高度、内边距和外边距都可控制。常见的块级元素有：table、form、ul li。。。

行内块元素（inline-block）：即融合了行内元素和块级元素的特性，即在一行显示，又能设置宽高。常见的行内块元素有：img、input、button。。。

这些元素之间是可以通过设置display属性来进行转换的。